'use client'

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { cn } from '@/lib/utils'

type AvatarSize = 'xs' | 'sm' | 'md' | 'lg'

const SIZE_CLASSES: Record<AvatarSize, string> = {
  xs: 'size-6 text-[10px]',
  sm: 'size-8 text-xs',
  md: 'size-10 text-sm',
  lg: 'size-12 text-base',
}

interface UserAvatarProps {
  userId: string
  username: string
  size?: AvatarSize
  className?: string
}

export function UserAvatar({ userId, username, size = 'md', className }: UserAvatarProps) {
  const initials = username.slice(0, 2).toUpperCase()

  return (
    <Avatar className={cn(SIZE_CLASSES[size], className)}>
      <AvatarImage src={`/api/users/${userId}/avatar`} alt={username} />
      <AvatarFallback className="bg-primary-container text-primary-container-foreground font-medium">
        {initials}
      </AvatarFallback>
    </Avatar>
  )
}