import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { useEffect, useState } from 'react';

type UserAvatarProps = {
  src?: string | null;
  alt: string;
  fallbackText: string;
  size?: 'default' | 'sm' | 'lg';
  className?: string;
};

function getInitials(text: string) {
  const words = text.trim().split(/\s+/).filter(Boolean).slice(0, 2);
  const initials = words.map((word) => word[0]?.toUpperCase() ?? '').join('');
  return initials || 'U';
}

export function UserAvatar({
  src,
  alt,
  fallbackText,
  size = 'default',
  className,
}: UserAvatarProps) {
  const [imageError, setImageError] = useState(false);

  useEffect(() => {
    setImageError(false);
  }, [src]);

  const canShowImage = Boolean(src) && !imageError;

  return (
    <Avatar size={size} className={className}>
      {canShowImage && (
        <AvatarImage
          src={src ?? undefined}
          alt={alt}
          onError={() => {
            setImageError(true);
          }}
        />
      )}
      <AvatarFallback>{getInitials(fallbackText)}</AvatarFallback>
    </Avatar>
  );
}