import React from 'react'
import { useLocalization } from '@/hooks/useLocalization'

interface AvatarProps {
  avatarUrl?: string
  primaryColor?: string
  altText?: string
  fallbackText?: string
  className?: string
}

const Avatar: React.FC<AvatarProps> = ({
  avatarUrl,
  primaryColor = '#3b82f6',
  altText,
  fallbackText,
  className = 'mr-2'
}) => {
  const { t } = useLocalization()

  const defaultAltText = altText || t('chat.aiAssistant')
  const defaultFallbackText = fallbackText || t('chat.ai')

  return avatarUrl ? (
    <img
      src={avatarUrl}
      alt={defaultAltText}
      className={`lfc-rounded-full lfc-object-cover ${className}`}
    />
  ) : (
    <div
      className={`lfc-rounded-full lfc-flex lfc-items-center lfc-justify-center lfc-text-white lfc-text-xs lfc-font-medium ${className}`}
      style={{ backgroundColor: primaryColor }}
    >
      {defaultFallbackText}
    </div>
  )
}

export default Avatar