import { forwardRef, type HTMLAttributes } from 'react'
import { cn } from '@/lib/utils'

export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
  initials: string
  src?: string
  alt?: string
  size?: 'sm' | 'default' | 'lg'
}

const sizeStyles = {
  sm: 'size-8 text-caption',
  default: 'size-10 text-body',
  lg: 'size-12 text-[18px]',
}

export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
  ({ initials, src, alt, size = 'default', className, ...props }, ref) => {
    const label = alt || initials

    return (
      <div
        ref={ref}
        role="img"
        aria-label={label}
        className={cn(
          'inline-flex shrink-0 items-center justify-center rounded-full bg-avatar text-avatar-text',
          sizeStyles[size],
          className,
        )}
        {...props}
      >
        {src ? (
          <img
            src={src}
            alt={label}
            className="size-full rounded-full object-cover"
          />
        ) : (
          initials.slice(0, 2).toUpperCase()
        )}
      </div>
    )
  },
)
Avatar.displayName = 'Avatar'