import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

import Image from "@/components/Image"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"

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

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

export default function Avatar({ image, initials }: AvatarProps) {
  let classNames = [styles.avatar]
  let element = <MaterialIcon icon="person" color="Icon/Inverted" />
  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 = (
      <Footnote type="label" color="white" textTransform="uppercase" asChild>
        <span>{initials}</span>
      </Footnote>
    )
  }
  return (
    <span data-hj-suppress className={classNames.join(" ")}>
      {element}
    </span>
  )
}