'use client'

import Image from 'next/image'
import { User } from 'lucide-react'

interface AvatarProps {
  src?: string
  alt?: string
  size?: number
  className?: string
}

export function Avatar({ src, alt = "Avatar", size = 96, className = "" }: AvatarProps) {
  // 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>
  )
}