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>
  )
}