import Link from 'next/link'
import styled from '@emotion/styled';
import { FC } from 'react';
import * as S from "./AvatarBox.styled"
import Image from 'next/image'
import {ImageData} from '../../../lib/types/imageData'

type Props = {
    type?: string
    nicename?: string
    position?: string
    profile_image?: ImageData
}

export const AvatarBox: FC<Props> = ({ type = 'default', nicename='nicename', position='position',profile_image }) => {


    return (

        <>

        <S.AvatarBox>

            <S.AvatarBoxImage>
                <Image
                    priority
                    src={process.env.NEXT_PUBLIC_STRAPI_ROOT+profile_image.data.attributes.formats.medium.url}
                    width={80}
                    height={80}
                    objectFit="cover"
                    alt={'cover image'}
                />
            </S.AvatarBoxImage>

            <S.AvatarBoxName>

                <strong>{nicename}</strong>
                <span>{position}</span>
            </S.AvatarBoxName>

        </S.AvatarBox>

        </>
    );
}