@page "/components/avatar"

<PageTitle>Avatar — Lumeo</PageTitle>

<PageHeader Title="Avatar" Description="An image element with a fallback for representing the user." />

<div class="mt-10 space-y-3">
    <Heading Id="when-to-use" Level="2" Class="scroll-mt-20">When to Use</Heading>
    <ul class="list-disc list-inside space-y-1 text-muted-foreground text-sm">
        <li>Display user profile pictures in headers, sidebars, or navigation</li>
        <li>Show team member lists with photos or initials</li>
        <li>Identify authors in comment threads and activity feeds</li>
        <li>Represent contacts in cards, chat interfaces, or directory pages</li>
        <li>Provide a visual identity fallback with initials when no image is available</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="With Image" Code="@_imageCode">
        <Flex Align="center" Gap="4">
            <Avatar>
                <AvatarImage Src="https://github.com/shadcn.png" Alt="User avatar" />
                <AvatarFallback>CN</AvatarFallback>
            </Avatar>
            <Avatar>
                <AvatarImage Src="https://github.com/vercel.png" Alt="Vercel" />
                <AvatarFallback>VC</AvatarFallback>
            </Avatar>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Fallback Initials" Code="@_fallbackCode">
        <Flex Align="center" Gap="4">
            <Avatar>
                <AvatarFallback>JD</AvatarFallback>
            </Avatar>
            <Avatar>
                <AvatarFallback>AB</AvatarFallback>
            </Avatar>
            <Avatar>
                <AvatarFallback>
                    <DynamicIcon Name="User" Class="h-4 w-4" />
                </AvatarFallback>
            </Avatar>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Sizes" Code="@_sizeCode">
        <Flex Align="center" Gap="4">
            <Avatar Size="Avatar.AvatarSize.Sm">
                <AvatarImage Src="https://github.com/shadcn.png" Alt="Small" />
                <AvatarFallback>SM</AvatarFallback>
            </Avatar>
            <Avatar Size="Avatar.AvatarSize.Default">
                <AvatarImage Src="https://github.com/shadcn.png" Alt="Default" />
                <AvatarFallback>MD</AvatarFallback>
            </Avatar>
            <Avatar Size="Avatar.AvatarSize.Lg">
                <AvatarImage Src="https://github.com/shadcn.png" Alt="Large" />
                <AvatarFallback>LG</AvatarFallback>
            </Avatar>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Group" Code="@_groupCode">
        <Flex Class="-space-x-3">
            <Avatar Class="border-2 border-background">
                <AvatarImage Src="https://github.com/shadcn.png" Alt="User 1" />
                <AvatarFallback>U1</AvatarFallback>
            </Avatar>
            <Avatar Class="border-2 border-background">
                <AvatarFallback>U2</AvatarFallback>
            </Avatar>
            <Avatar Class="border-2 border-background">
                <AvatarFallback>U3</AvatarFallback>
            </Avatar>
            <Avatar Class="border-2 border-background">
                <AvatarFallback>+3</AvatarFallback>
            </Avatar>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Shape (interactive)" Code="@_shapeCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Toggle the shape to see Circle vs Square applied live.</Lumeo.Text>
            <Segmented @bind-Value="_avatarShape">
                <SegmentedItem Value="Circle">Circle</SegmentedItem>
                <SegmentedItem Value="Square">Square</SegmentedItem>
            </Segmented>
            <Flex Align="center" Gap="4">
                <Avatar Shape="@_avatarShapeEnum">
                    <AvatarImage Src="https://github.com/shadcn.png" Alt="User" />
                    <AvatarFallback>JD</AvatarFallback>
                </Avatar>
                <Avatar Shape="@_avatarShapeEnum">
                    <AvatarFallback>AB</AvatarFallback>
                </Avatar>
                <Avatar Shape="@_avatarShapeEnum" Size="Avatar.AvatarSize.Lg">
                    <AvatarFallback>XL</AvatarFallback>
                </Avatar>
            </Flex>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Presence Status (interactive)" Code="@_statusCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Select a status to see the presence indicator update.</Lumeo.Text>
            <Segmented @bind-Value="_avatarStatus">
                <SegmentedItem Value="None">None</SegmentedItem>
                <SegmentedItem Value="Online">Online</SegmentedItem>
                <SegmentedItem Value="Away">Away</SegmentedItem>
                <SegmentedItem Value="Busy">Busy</SegmentedItem>
                <SegmentedItem Value="Offline">Offline</SegmentedItem>
            </Segmented>
            <Flex Align="center" Gap="4">
                <Avatar Status="@_avatarStatusEnum" Size="Avatar.AvatarSize.Lg">
                    <AvatarImage Src="https://github.com/shadcn.png" Alt="User" />
                    <AvatarFallback>JD</AvatarFallback>
                </Avatar>
                <Lumeo.Text Size="sm" Color="muted">Status: <strong class="text-foreground">@_avatarStatus</strong></Lumeo.Text>
            </Flex>
        </Stack>
    </ComponentDemo>
</Stack>

<div class="mt-12">
    <Heading Id="keyboard-interactions" Level="2" Class="scroll-mt-20">Keyboard Interactions</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Key</TableHead>
                    <TableHead>Action</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell><Kbd>Tab</Kbd></TableCell><TableCell>Move focus to the avatar if it is wrapped in a link or button</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>
    <Lumeo.Text Size="sm" Color="muted" Class="mt-2">Avatar is a display-only component with no built-in keyboard interactions. When used as a link or inside a button, it inherits the wrapper's keyboard behavior.</Lumeo.Text>
</div>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</Heading>

    <Stack Gap="8" Class="mt-8">
        <Stack>
            <Heading Level="3" Class="mb-3">Avatar</Heading>
            <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
                <table class="w-full min-w-[600px] text-sm">
                    <thead>
                        <tr class="border-b border-border/40 bg-muted/40">
                            <th class="text-left p-3 font-medium text-foreground">Property</th>
                            <th class="text-left p-3 font-medium text-foreground">Type</th>
                            <th class="text-left p-3 font-medium text-foreground">Default</th>
                            <th class="text-left p-3 font-medium text-foreground">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40">
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Size</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">AvatarSize</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Default</td>
                            <td class="p-3 text-muted-foreground">Size of the avatar circle. Values: Sm (32px), Default (40px), Lg (48px).</td>
                        </tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Shape</td><td class="p-3 font-mono text-xs text-muted-foreground">AvatarShape</td><td class="p-3 font-mono text-xs text-muted-foreground">Circle</td><td class="p-3 text-muted-foreground">Outline shape. Values: Circle, Square, Rounded.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Status</td><td class="p-3 font-mono text-xs text-muted-foreground">AvatarStatus</td><td class="p-3 font-mono text-xs text-muted-foreground">None</td><td class="p-3 text-muted-foreground">Presence indicator. Values: None, Online, Offline, Busy, Away.</td></tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">AvatarGroup</Heading>
            <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
                <table class="w-full min-w-[600px] text-sm">
                    <thead>
                        <tr class="border-b border-border/40 bg-muted/40">
                            <th class="text-left p-3 font-medium text-foreground">Property</th>
                            <th class="text-left p-3 font-medium text-foreground">Type</th>
                            <th class="text-left p-3 font-medium text-foreground">Default</th>
                            <th class="text-left p-3 font-medium text-foreground">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40">
                        <tr><td class="p-3 font-mono text-xs text-primary">Max</td><td class="p-3 font-mono text-xs text-muted-foreground">int</td><td class="p-3 font-mono text-xs text-muted-foreground">0</td><td class="p-3 text-muted-foreground">Maximum visible avatars; overflow is replaced by a "+N" placeholder. 0 means no limit.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Total</td><td class="p-3 font-mono text-xs text-muted-foreground">int?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">Explicit total count used to compute the overflow badge when more avatars exist than rendered.</td></tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">AvatarImage</Heading>
            <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
                <table class="w-full min-w-[600px] text-sm">
                    <thead>
                        <tr class="border-b border-border/40 bg-muted/40">
                            <th class="text-left p-3 font-medium text-foreground">Property</th>
                            <th class="text-left p-3 font-medium text-foreground">Type</th>
                            <th class="text-left p-3 font-medium text-foreground">Default</th>
                            <th class="text-left p-3 font-medium text-foreground">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40">
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Src</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">string?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">URL of the avatar image.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Alt</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">string?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Alternative text for the image for accessibility.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">OnError</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Callback invoked when the image fails to load.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">AvatarFallback</Heading>
            <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
                <table class="w-full min-w-[600px] text-sm">
                    <thead>
                        <tr class="border-b border-border/40 bg-muted/40">
                            <th class="text-left p-3 font-medium text-foreground">Property</th>
                            <th class="text-left p-3 font-medium text-foreground">Type</th>
                            <th class="text-left p-3 font-medium text-foreground">Default</th>
                            <th class="text-left p-3 font-medium text-foreground">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40">
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary italic text-muted-foreground" colspan="4">Renders the fallback content (initials or icon) inside the avatar circle.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>
    </Stack>
</Stack>

<div class="mt-12">
    <Heading Id="related" Level="2" Class="scroll-mt-20">Related Components</Heading>
    <ul class="mt-4 space-y-2 text-sm">
        <li><a href="/components/badge" class="text-primary hover:underline">Badge</a> — Overlay a dot badge on an avatar to show online status or notification counts</li>
        <li><a href="/components/tooltip" class="text-primary hover:underline">Tooltip</a> — Show the full user name on hover when only an avatar is displayed</li>
        <li><a href="/components/hover-card" class="text-primary hover:underline">HoverCard</a> — Display a rich profile preview when hovering over an avatar</li>
    </ul>
</div>

@code {
    private string _avatarShape = "Circle";
    private Avatar.AvatarShape _avatarShapeEnum =>
        Enum.TryParse<Avatar.AvatarShape>(_avatarShape, out var v) ? v : Avatar.AvatarShape.Circle;
    private string _avatarStatus = "Online";
    private Avatar.AvatarStatus _avatarStatusEnum =>
        Enum.TryParse<Avatar.AvatarStatus>(_avatarStatus, out var v) ? v : Avatar.AvatarStatus.Online;

    private string _shapeCode = @"<Segmented @bind-Value=""_shape"">
    <SegmentedItem Value=""@Avatar.AvatarShape.Circle"">Circle</SegmentedItem>
    <SegmentedItem Value=""@Avatar.AvatarShape.Square"">Square</SegmentedItem>
</Segmented>
<Avatar Shape=""@_shape"">
    <AvatarFallback>JD</AvatarFallback>
</Avatar>

@code { private Avatar.AvatarShape _shape = Avatar.AvatarShape.Circle; }";

    private string _statusCode = @"<Segmented @bind-Value=""_status"">
    <SegmentedItem Value=""@Avatar.AvatarStatus.Online"">Online</SegmentedItem>
    <SegmentedItem Value=""@Avatar.AvatarStatus.Away"">Away</SegmentedItem>
    <SegmentedItem Value=""@Avatar.AvatarStatus.Busy"">Busy</SegmentedItem>
    <SegmentedItem Value=""@Avatar.AvatarStatus.Offline"">Offline</SegmentedItem>
</Segmented>
<Avatar Status=""@_status"" Size=""Avatar.AvatarSize.Lg"">
    <AvatarFallback>JD</AvatarFallback>
</Avatar>

@code { private Avatar.AvatarStatus _status = Avatar.AvatarStatus.Online; }";

    private string _imageCode = @"<Avatar>
    <AvatarImage Src=""https://github.com/shadcn.png"" Alt=""User avatar"" />
    <AvatarFallback>CN</AvatarFallback>
</Avatar>";

    private string _fallbackCode = @"<Avatar>
    <AvatarFallback>JD</AvatarFallback>
</Avatar>
<Avatar>
    <AvatarFallback>
        <Blazicon Svg=""Lucide.User"" class=""h-4 w-4"" />
    </AvatarFallback>
</Avatar>";

    private string _sizeCode = @"<Avatar Size=""Avatar.AvatarSize.Sm"">
    <AvatarImage Src=""..."" Alt=""Small"" />
    <AvatarFallback>SM</AvatarFallback>
</Avatar>
<Avatar Size=""Avatar.AvatarSize.Lg"">
    <AvatarImage Src=""..."" Alt=""Large"" />
    <AvatarFallback>LG</AvatarFallback>
</Avatar>";

    private string _groupCode = @"<Flex Class=""-space-x-3"">
    <Avatar Class=""border-2 border-background"">
        <AvatarImage Src=""..."" Alt=""User 1"" />
        <AvatarFallback>U1</AvatarFallback>
    </Avatar>
    <Avatar Class=""border-2 border-background"">
        <AvatarFallback>U2</AvatarFallback>
    </Avatar>
    <Avatar Class=""border-2 border-background"">
        <AvatarFallback>+3</AvatarFallback>
    </Avatar>
</Flex>";
}
