@page "/components/list"

<PageTitle>List — Lumeo</PageTitle>

<PageHeader Title="List" Description="A vertical list of items with support for icons, meta text, leading/trailing content, and hover states — the building block for menus, contacts, settings, and feeds." />

<Stack Gap="8">
    <ComponentDemo Title="Basic List" Code="@_basicCode">
        <List Bordered="true" Class="max-w-sm">
            <ListItem Title="Alice Johnson" Description="alice@example.com" />
            <ListItem Title="Bob Smith" Description="bob@example.com" />
            <ListItem Title="Carol White" Description="carol@example.com" />
        </List>
    </ComponentDemo>

    <ComponentDemo Title="With Leading Icon" Code="@_leadingCode">
        <List Bordered="true" Hoverable="true" Class="max-w-sm">
            <ListItem Title="Inbox" Description="12 unread messages">
                <Leading><DynamicIcon Name="Inbox" Class="h-5 w-5 text-muted-foreground" /></Leading>
            </ListItem>
            <ListItem Title="Sent" Description="View sent messages">
                <Leading><DynamicIcon Name="Send" Class="h-5 w-5 text-muted-foreground" /></Leading>
            </ListItem>
            <ListItem Title="Drafts" Description="3 unsaved drafts">
                <Leading><DynamicIcon Name="FileText" Class="h-5 w-5 text-muted-foreground" /></Leading>
            </ListItem>
            <ListItem Title="Trash" Description="Empty trash">
                <Leading><DynamicIcon Name="Trash2" Class="h-5 w-5 text-muted-foreground" /></Leading>
            </ListItem>
        </List>
    </ComponentDemo>

    <ComponentDemo Title="With Trailing Content" Code="@_trailingCode">
        <List Bordered="true" Class="max-w-sm">
            <ListItem Title="Notifications">
                <Leading><DynamicIcon Name="Bell" Class="h-5 w-5 text-muted-foreground" /></Leading>
                <Trailing><Badge Variant="Badge.BadgeVariant.Default">3</Badge></Trailing>
            </ListItem>
            <ListItem Title="Messages">
                <Leading><DynamicIcon Name="MessageSquare" Class="h-5 w-5 text-muted-foreground" /></Leading>
                <Trailing><Badge Variant="Badge.BadgeVariant.Secondary">12</Badge></Trailing>
            </ListItem>
            <ListItem Title="Settings">
                <Leading><DynamicIcon Name="Settings" Class="h-5 w-5 text-muted-foreground" /></Leading>
                <Trailing><DynamicIcon Name="ChevronRight" Class="h-4 w-4 text-muted-foreground" /></Trailing>
            </ListItem>
        </List>
    </ComponentDemo>

    <ComponentDemo Title="Sizes" Code="@_sizesCode">
        <Stack Gap="6">
            <Stack Gap="2">
                <Lumeo.Text Class="text-xs text-muted-foreground font-medium uppercase tracking-wide">Small</Lumeo.Text>
                <List Bordered="true" Size="List.ListSize.Sm" Class="max-w-xs">
                    <ListItem Title="Item one" />
                    <ListItem Title="Item two" />
                </List>
            </Stack>
            <Stack Gap="2">
                <Lumeo.Text Class="text-xs text-muted-foreground font-medium uppercase tracking-wide">Default</Lumeo.Text>
                <List Bordered="true" Class="max-w-xs">
                    <ListItem Title="Item one" />
                    <ListItem Title="Item two" />
                </List>
            </Stack>
            <Stack Gap="2">
                <Lumeo.Text Class="text-xs text-muted-foreground font-medium uppercase tracking-wide">Large</Lumeo.Text>
                <List Bordered="true" Size="List.ListSize.Lg" Class="max-w-xs">
                    <ListItem Title="Item one" />
                    <ListItem Title="Item two" />
                </List>
            </Stack>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Clickable Items" Code="@_clickableCode">
        <Stack Gap="3">
            <List Bordered="true" Hoverable="true" Class="max-w-sm">
                <ListItem Title="View profile" OnClick="@(() => _clicked = "View profile")">
                    <Leading><DynamicIcon Name="User" Class="h-5 w-5 text-muted-foreground" /></Leading>
                    <Trailing><DynamicIcon Name="ChevronRight" Class="h-4 w-4 text-muted-foreground" /></Trailing>
                </ListItem>
                <ListItem Title="Account settings" OnClick="@(() => _clicked = "Account settings")">
                    <Leading><DynamicIcon Name="Settings2" Class="h-5 w-5 text-muted-foreground" /></Leading>
                    <Trailing><DynamicIcon Name="ChevronRight" Class="h-4 w-4 text-muted-foreground" /></Trailing>
                </ListItem>
                <ListItem Title="Sign out" Disabled="true">
                    <Leading><DynamicIcon Name="LogOut" Class="h-5 w-5 text-muted-foreground" /></Leading>
                </ListItem>
            </List>
            @if (!string.IsNullOrEmpty(_clicked))
            {
                <Lumeo.Text Class="text-sm text-muted-foreground">Clicked: @_clicked</Lumeo.Text>
            }
        </Stack>
    </ComponentDemo>
</Stack>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</Heading>
    <Stack Gap="8">
        <Stack>
            <Heading Level="3" Class="mb-3">List</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">Bordered</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">false</td>
                            <td class="p-3 text-muted-foreground">Add outer border and dividers between items.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Hoverable</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">false</td>
                            <td class="p-3 text-muted-foreground">Show a subtle background highlight on hover.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Size</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">ListSize</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Default</td>
                            <td class="p-3 text-muted-foreground">Controls item padding: Sm, Default, or Lg.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>
        <Stack>
            <Heading Level="3" Class="mb-3">ListItem</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">Title</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">—</td>
                            <td class="p-3 text-muted-foreground">Primary text (bold, truncated).</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Description</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">—</td>
                            <td class="p-3 text-muted-foreground">Secondary text below the title (muted, truncated).</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Leading</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">RenderFragment?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Content placed on the left (icon, avatar, checkbox).</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Trailing</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">RenderFragment?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Content placed on the right (badge, chevron, action button).</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ChildContent</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">RenderFragment?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Custom content rendered inside the main content area.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Href</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">—</td>
                            <td class="p-3 text-muted-foreground">Makes the item a navigation link.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">OnClick</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">Click handler for interactive items.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Disabled</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">false</td>
                            <td class="p-3 text-muted-foreground">Disable the item (dimmed, non-clickable).</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>
    </Stack>
</Stack>

@code {
    private string _clicked = "";

    private string _basicCode = @"<List Bordered=""true"">
    <ListItem Title=""Alice Johnson"" Description=""alice@example.com"" />
    <ListItem Title=""Bob Smith"" Description=""bob@example.com"" />
    <ListItem Title=""Carol White"" Description=""carol@example.com"" />
</List>";

    private string _leadingCode = @"<List Bordered=""true"" Hoverable=""true"">
    <ListItem Title=""Inbox"" Description=""12 unread"">
        <Leading><DynamicIcon Name=""Inbox"" Class=""h-5 w-5 text-muted-foreground"" /></Leading>
    </ListItem>
    <ListItem Title=""Sent"">
        <Leading><DynamicIcon Name=""Send"" Class=""h-5 w-5 text-muted-foreground"" /></Leading>
    </ListItem>
</List>";

    private string _trailingCode = @"<List Bordered=""true"">
    <ListItem Title=""Notifications"">
        <Leading><DynamicIcon Name=""Bell"" Class=""h-5 w-5 text-muted-foreground"" /></Leading>
        <Trailing><Badge Variant=""Badge.BadgeVariant.Default"">3</Badge></Trailing>
    </ListItem>
    <ListItem Title=""Settings"">
        <Leading><DynamicIcon Name=""Settings"" Class=""h-5 w-5 text-muted-foreground"" /></Leading>
        <Trailing><DynamicIcon Name=""ChevronRight"" Class=""h-4 w-4 text-muted-foreground"" /></Trailing>
    </ListItem>
</List>";

    private string _sizesCode = @"<List Bordered=""true"" Size=""List.ListSize.Sm"">...</List>
<List Bordered=""true"">...</List>
<List Bordered=""true"" Size=""List.ListSize.Lg"">...</List>";

    private string _clickableCode = @"<List Bordered=""true"" Hoverable=""true"">
    <ListItem Title=""View profile"" OnClick=""@HandleClick"">
        <Leading><DynamicIcon Name=""User"" Class=""h-5 w-5 text-muted-foreground"" /></Leading>
        <Trailing><DynamicIcon Name=""ChevronRight"" Class=""h-4 w-4 text-muted-foreground"" /></Trailing>
    </ListItem>
    <ListItem Title=""Sign out"" Disabled=""true"">
        <Leading><DynamicIcon Name=""LogOut"" Class=""h-5 w-5 text-muted-foreground"" /></Leading>
    </ListItem>
</List>";
}
