import { Avatar, type AvatarRootProps } from '@chakra-ui/react'

export interface CalledItAvatarProps extends AvatarRootProps {
  name?: string
  src?: string
}

export function CalledItAvatar({
  name,
  src,
  size = 'md',
  ...props
}: CalledItAvatarProps) {
  return (
    <Avatar.Root size={size} {...props}>
      {src ? <Avatar.Image src={src} alt={name} objectFit="contain" /> : null}
      <Avatar.Fallback name={name} bg="brand.100" color="brand.700" />
    </Avatar.Root>
  )
}
