import { PersonIcon } from "@/components/Icons"
import Image from "@/components/Image"

import styles from "./avatar.module.css"

import { AvatarProps } from "@/types/components/header/avatar"

export default function Avatar({ image, initials }: AvatarProps) {
  let classNames = [styles.avatar]
  let element = <PersonIcon color="white" />
  if (image) {
    classNames.push(styles.image)
    element = <Image src={image.src} alt={image.alt} width={28} height={28} />
  } else if (initials) {
    classNames.push(styles.initials)
    element = <span>{initials}</span>
  }
  return <span className={classNames.join(" ")}>{element}</span>
}