import type { ReactNode } from 'react'

type Props = {
  src?: string | null
  alt?: string
  size?: 'xs' | 'sm' | 'md' | 'lg'
  className?: string
  fallback?: ReactNode
}

const sizes = {
  xs: 'w-8 h-8 ring-2',
  sm: 'w-10 h-10 ring-4',
  md: 'w-16 h-16 ring-4',
  lg: 'w-14 h-14 md:w-24 md:h-24 ring-4',
}

export default function Avatar({ src, alt = '', size, className = '', fallback }: Props) {
  const sizeClass = size ? sizes[size] : ''
  const ringClass = size ? 'ring-stone-100 dark:ring-stone-800/70' : ''
  const base = `rounded-full shrink-0 ${sizeClass} ${ringClass} ${className}`.trim()

  if (!src) return fallback ? <>{fallback}</> : <div className={`${base} bg-stone-200 dark:bg-stone-700`} />
  return <img src={src} alt={alt} className={`${base} object-cover`} />
}
