import { cn } from "@/lib/utils"

interface SurrealAvatarProps {
  src?: string
  alt?: string
  fallback?: string
  size?: "sm" | "md" | "lg"
  className?: string
}

export function SurrealAvatar({ src, alt, fallback, size = "md", className }: SurrealAvatarProps) {
  const sizeClasses = {
    sm: "w-8 h-8 text-xs",
    md: "w-10 h-10 text-sm",
    lg: "w-14 h-14 text-base",
  }

  return (
    <div
      className={cn(
        "relative overflow-hidden rounded-full bg-secondary flex items-center justify-center",
        "ring-2 ring-primary/30 transition-all duration-200 hover:ring-primary/60",
        sizeClasses[size],
        className,
      )}
    >
      {src ? (
        <img src={src || "/placeholder.svg"} alt={alt || "Avatar"} className="w-full h-full object-cover" />
      ) : (
        <span className="font-medium text-secondary-foreground uppercase">{fallback?.slice(0, 2) || "?"}</span>
      )}
    </div>
  )
}
