// shadcn Avatar — circular image with text fallback.
// Minimal: no async image-state machine, plain <img> + <span> fallback.
// Upgrade to Radix Avatar when load-state UX matters.

import type { HTMLAttributes, ReactNode } from 'react'
import { cn } from '../cn'

interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
  readonly src?: string
  readonly alt?: string
  readonly fallback?: string
  readonly size?: 'sm' | 'md' | 'lg'
}

const sizeClasses = {
  sm: 'size-6 text-xs',
  md: 'size-9 text-sm',
  lg: 'size-12 text-base',
} as const

export const Avatar = ({ src, alt, fallback, size = 'md', className, ...props }: AvatarProps): ReactNode => (
  <div
    data-slot="avatar"
    className={cn(
      'relative inline-flex items-center justify-center overflow-hidden rounded-full bg-muted',
      sizeClasses[size],
      className,
    )}
    {...props}
  >
    {src ? (
      <img src={src} alt={alt ?? ''} className="size-full object-cover" />
    ) : (
      <span className="font-medium text-muted-foreground select-none">
        {fallback ?? '?'}
      </span>
    )}
  </div>
)