Avatar

import { Avatar } from "@/components/ui/avatar";

export default function AvatarDemo() {
  return (
    <div className="flex flex-col gap-8 p-6">
      {/* Sizes */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">Sizes</h3>
        <div className="flex items-center gap-4">
          <Avatar size="sm" firstName="John" lastName="Doe" />
          <Avatar size="md" firstName="Jane" lastName="Smith" />
          <Avatar size="lg" firstName="Alex" lastName="Johnson" />
          <Avatar size="xl" firstName="Emma" lastName="Wilson" />
        </div>
      </div>

      {/* With Images */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">With Images</h3>
        <div className="flex items-center gap-4">
          <Avatar 
            size="lg" 
            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face" 
            alt="John Doe"
          />
          <Avatar 
            size="lg" 
            src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop&crop=face" 
            alt="Jane Smith"
          />
          <Avatar 
            size="lg" 
            src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face" 
            alt="Alex Johnson"
          />
        </div>
      </div>

      {/* Fallback */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">Fallback (Initials)</h3>
        <div className="flex items-center gap-4">
          <Avatar size="lg" firstName="Иван" lastName="Иванов" />
          <Avatar size="lg" fallback="AI" />
          <Avatar size="lg" fallback="🤖" />
          <Avatar size="lg" /> {/* Shows "?" */}
        </div>
      </div>

      {/* Broken Image (shows fallback) */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">Broken Image → Fallback</h3>
        <div className="flex items-center gap-4">
          <Avatar 
            size="lg" 
            src="https://broken-url.com/image.jpg" 
            firstName="Broken"
            lastName="Image"
          />
        </div>
      </div>
    </div>
  )
}