import { MaterialIcon } from "../Icons/MaterialIcon"
import { Typography } from "../Typography"
import Image from "../Image"

import { variants } from "./variants"
import type { AvatarProps } from "./types"

export function Avatar({
  src,
  alt,
  initials,
  size = "md",
  className,
}: AvatarProps) {
  const classNames = variants({ size, className })
  const pixelSize = size === "sm" ? 24 : size === "md" ? 32 : 55
  const iconSize = size === "sm" ? 16 : 24

  return (
    <div className={classNames}>
      {src ? (
        <Image src={src} alt={alt || ""} width={pixelSize} height={pixelSize} />
      ) : initials ? (
        <Typography
          variant={size === "lg" ? "Title/Overline/sm" : "Tag/sm"}
          className={variants.initials}
        >
          <span data-hj-suppress>{initials}</span>
        </Typography>
      ) : (
        <MaterialIcon icon="person" color="Icon/Inverted" size={iconSize} />
      )}
    </div>
  )
}