'use client'

import React from 'react'

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

export interface AvatarProps {
  src?: string
  alt: string
  size?: AvatarSize
  fallbackText?: string
  className?: string
}

const sizeStyles: Record<AvatarSize, string> = {
  xs: 'w-6 h-6 text-xs',
  sm: 'w-8 h-8 text-sm',
  md: 'w-10 h-10 text-base',
  lg: 'w-12 h-12 text-lg',
  xl: 'w-16 h-16 text-xl',
}

export const Avatar = ({
  src,
  alt,
  size = 'md',
  fallbackText,
  className = '',
}: AvatarProps) => {
  const [imageError, setImageError] = React.useState(false)

  const initials = React.useMemo(() => {
    if (fallbackText) {
      return fallbackText
        .split(' ')
        .map((word) => word[0])
        .join('')
        .toUpperCase()
        .slice(0, 2)
    }
    return alt
      .split(' ')
      .map((word) => word[0])
      .join('')
      .toUpperCase()
      .slice(0, 2)
  }, [fallbackText, alt])

  const showFallback = !src || imageError

  const baseStyles = 'inline-flex items-center justify-center rounded-full overflow-hidden'
  const fallbackStyles = 'bg-gradient-to-br from-primary-400 to-secondary-500 text-white font-semibold'

  const combinedClassName = `${baseStyles} ${sizeStyles[size]} ${showFallback ? fallbackStyles : ''} ${className}`.trim()

  if (showFallback) {
    return (
      <div className={combinedClassName} role="img" aria-label={alt}>
        {initials}
      </div>
    )
  }

  return (
    <img
      src={src}
      alt={alt}
      className={combinedClassName}
      onError={() => setImageError(true)}
    />
  )
}