'use client'

import Image from 'next/image'
import { User } from 'lucide-react'
import { cn } from '@/lib/utils'

interface AvatarProps {
  children: React.ReactNode
  className?: string
}

export function Avatar({ children, className }: AvatarProps) {
  return (
    <div className={cn(
      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full bg-muted',
      className
    )}>
      {children}
    </div>
  )
}

interface AvatarImageProps {
  src?: string
  alt?: string
  className?: string
}

export function AvatarImage({ src, alt, className }: AvatarImageProps) {
  if (!src) return null

  if (src.startsWith('data:')) {
    // eslint-disable-next-line @next/next/no-img-element
    return (
      <img 
        src={src} 
        alt={alt} 
        className={cn('aspect-square h-full w-full object-cover', className)}
      />
    )
  }

  return (
    <Image 
      src={src} 
      alt={alt || ''}
      width={40}
      height={40}
      className={cn('aspect-square h-full w-full object-cover', className)}
    />
  )
}

interface AvatarFallbackProps {
  children: React.ReactNode
  className?: string
}

export function AvatarFallback({ children, className }: AvatarFallbackProps) {
  return (
    <div className={cn(
      'flex h-full w-full items-center justify-center rounded-full bg-muted text-muted-foreground text-sm font-medium',
      className
    )}>
      {children}
    </div>
  )
}

// Legacy component for backward compatibility
interface LegacyAvatarProps {
  src?: string
  alt?: string
  size?: number
  className?: string
}

export function LegacyAvatar({ src, alt = "Avatar", size = 96, className = "" }: LegacyAvatarProps) {
  // Convert pixel size to Tailwind classes
  const getSizeClasses = (size: number) => {
    if (size <= 32) return "w-8 h-8"
    if (size <= 40) return "w-10 h-10" 
    if (size <= 48) return "w-12 h-12"
    if (size <= 64) return "w-16 h-16"
    if (size <= 96) return "w-24 h-24"
    return "w-32 h-32"
  }

  const getIconSize = (size: number) => {
    if (size <= 32) return "w-4 h-4"
    if (size <= 40) return "w-5 h-5" 
    if (size <= 48) return "w-6 h-6"
    if (size <= 64) return "w-8 h-8"
    if (size <= 96) return "w-12 h-12"
    return "w-16 h-16"
  }
  
  const sizeClass = getSizeClasses(size)
  const iconClass = getIconSize(size)
  
  if (!src) {
    return (
      <div className={`${sizeClass} rounded-full bg-muted flex items-center justify-center overflow-hidden ${className}`}>
        <User className={`${iconClass} text-muted-foreground`} />
      </div>
    )
  }

  return (
    <div className={`${sizeClass} rounded-full bg-muted flex items-center justify-center overflow-hidden ${className}`}>
      {src.startsWith('data:') ? (
        // eslint-disable-next-line @next/next/no-img-element
        <img 
          src={src} 
          alt={alt} 
          className="w-full h-full object-cover"
        />
      ) : (
        <Image 
          src={src} 
          alt={alt} 
          width={size}
          height={size}
          className="w-full h-full object-cover"
        />
      )}
    </div>
  )
}