Avatar

import { Avatar, AvatarFallback, AvatarImage } from "@/components/redpanda-ui/avatar"

<Avatar>
  <AvatarImage src="https://github.com/malinskibeniamin.png" alt="@malinskibeniamin" />
  <AvatarFallback>BM</AvatarFallback>
</Avatar>

// Small avatar
<Avatar className="h-6 w-6">
  <AvatarImage src="/user-small.jpg" alt="User" />
  <AvatarFallback className="text-xs">U</AvatarFallback>
</Avatar>

// Default avatar (32px)
<Avatar>
  <AvatarImage src="/user-default.jpg" alt="User" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

// Large avatar
<Avatar className="h-12 w-12">
  <AvatarImage src="/user-large.jpg" alt="User" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

// Extra large avatar
<Avatar className="h-16 w-16">
  <AvatarImage src="/user-xl.jpg" alt="User" />
  <AvatarFallback className="text-lg">JD</AvatarFallback>
</Avatar>

// Text initials
<Avatar>
  <AvatarImage src="/broken-link.jpg" alt="User" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

// Icon fallback
<Avatar>
  <AvatarImage src="/broken-link.jpg" alt="User" />
  <AvatarFallback>
    <User className="h-4 w-4" />
  </AvatarFallback>
</Avatar>

// Custom background
<Avatar>
  <AvatarImage src="/broken-link.jpg" alt="User" />
  <AvatarFallback className="bg-red-500 text-white">AD</AvatarFallback>
</Avatar>

<div className="relative">
  <Avatar>
    <AvatarImage src="/user.jpg" alt="User" />
    <AvatarFallback>JD</AvatarFallback>
  </Avatar>
  {/* Online status */}
  <span className="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-green-500 ring-2 ring-white" />
</div>

<div className="relative">
  <Avatar>
    <AvatarImage src="/user.jpg" alt="User" />
    <AvatarFallback>JD</AvatarFallback>
  </Avatar>
  {/* Away status */}
  <span className="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-yellow-500 ring-2 ring-white" />
</div>

Avatar Container (32px × 32px by default)
┌─────────────────────────────────────────────────┐
│ Avatar Root (relative, rounded-full)            │
│ ┌─────────────────────────────────────────────┐ │
│ │ AvatarImage (absolute, fills container)     │ │
│ │ - Loads asynchronously                      │ │
│ │ - Hidden if fails to load                   │ │
│ └─────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────┐ │
│ │ AvatarFallback (backup content)             │ │
│ │ - Shows when image fails/loading            │ │
│ │ - Text initials or icon                     │ │
│ │ - Centered content                          │ │
│ └─────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────┘

Fallback Logic:
1. Show AvatarImage if available and loads successfully
2. Show AvatarFallback if image fails or while loading
3. AvatarFallback always rendered but hidden when image loads