import React, { useState, useEffect } from 'react';

export const Avatar = React.forwardRef<HTMLDivElement, any>(({ className = '', asChild, ...props }, ref) => (
  <div ref={ref} className={`relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full ${className}`} {...props} />
));
Avatar.displayName = "Avatar";

export const AvatarImage = React.forwardRef<HTMLImageElement, any>(({ className = '', src, alt, asChild, ...props }, ref) => {
  const [error, setError] = useState(false);

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

  if (error || !src) return null;
  return (
    <img
      ref={ref}
      src={src}
      alt={alt}
      onError={() => setError(true)}
      className={`aspect-square h-full w-full object-cover ${className}`}
      {...props}
    />
  );
});
AvatarImage.displayName = "AvatarImage";

export const AvatarFallback = React.forwardRef<HTMLDivElement, any>(({ className = '', asChild, ...props }, ref) => (
  <div ref={ref} className={`flex h-full w-full items-center justify-center rounded-full bg-surface-hover ${className}`} {...props} />
));
AvatarFallback.displayName = "AvatarFallback";