@page "/components/dynamic-icon"
@namespace Lumeo.Docs.Pages.Components

<PageTitle>DynamicIcon — Lumeo</PageTitle>

<PageHeader Title="DynamicIcon" Description="A docs utility component that renders icons by name and automatically adapts to the active icon library selected in the Customizer." />

<Stack Gap="8">
    <!-- Basic Usage Demo -->
    <ComponentDemo Title="Basic Usage" Code="@_codeBasic">
        <Flex Gap="4" Wrap="true" Align="center">
            <DynamicIcon Name="Search" Class="h-5 w-5" />
            <DynamicIcon Name="Bell" Class="h-5 w-5" />
            <DynamicIcon Name="Settings" Class="h-5 w-5" />
            <DynamicIcon Name="User" Class="h-5 w-5" />
            <DynamicIcon Name="Heart" Class="h-5 w-5 text-destructive" />
            <DynamicIcon Name="Star" Class="h-5 w-5 text-primary" />
        </Flex>
    </ComponentDemo>

    <!-- All Icons Grid -->
    <Stack Gap="3">
        <Heading Level="2" Class="text-lg font-semibold">All Supported Icons</Heading>
        <Lumeo.Text Color="muted" Size="sm">Switch the icon library in the Customizer to see all icons update live.</Lumeo.Text>
        <Grid Class="grid-cols-4 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10 gap-2">
            @foreach (var icon in _icons)
            {
                <Stack Align="center" Gap="1" Class="rounded-md border border-border/40 bg-card p-2 hover:bg-accent transition-colors text-center">
                    <DynamicIcon Name="@icon" Class="h-5 w-5" />
                    <Lumeo.Text Size="xs" Color="muted" Class="truncate w-full text-center leading-tight" style="font-size:10px">@icon</Lumeo.Text>
                </Stack>
            }
        </Grid>
    </Stack>

    <!-- How It Works -->
    <Stack Gap="3">
        <Heading Level="2" Class="text-lg font-semibold">How It Works</Heading>
        <Lumeo.Text Color="muted" Size="sm">DynamicIcon is a docs-only component that wraps Blazicons and maps abstract icon names to the correct icon in whichever library is currently active. It listens to <code>IconService.OnChange</code> and re-renders automatically.</Lumeo.Text>
        <ComponentDemo Title="With Colors & Sizes" Code="@_codeSizes">
            <Flex Gap="4" Wrap="true" Align="center">
                <DynamicIcon Name="Heart" Class="h-3 w-3 text-destructive" />
                <DynamicIcon Name="Heart" Class="h-4 w-4 text-destructive" />
                <DynamicIcon Name="Heart" Class="h-5 w-5 text-destructive" />
                <DynamicIcon Name="Heart" Class="h-6 w-6 text-destructive" />
                <DynamicIcon Name="Heart" Class="h-8 w-8 text-destructive" />
                <DynamicIcon Name="Star" Class="h-5 w-5 text-primary" />
                <DynamicIcon Name="Bell" Class="h-5 w-5 text-muted-foreground" />
                <DynamicIcon Name="Check" Class="h-5 w-5 text-chart-1" />
            </Flex>
        </ComponentDemo>
    </Stack>
</Stack>

<div class="mt-16">
    <Heading Id="api-reference" Level="2" Class="scroll-mt-20">API Reference</Heading>

    <Heading Id="dynamicicon" Level="3" Class="mt-8 scroll-mt-20">DynamicIcon</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">Name</TableCell><TableCell Class="font-mono text-xs">string</TableCell><TableCell Class="font-mono text-xs">"Circle"</TableCell><TableCell>Abstract icon name (e.g. "Search", "Bell", "Settings"). Mapped to the active icon library.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>CSS classes for sizing and color (e.g. "h-5 w-5 text-primary").</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes passed to the underlying Blazicon element.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>
</div>

@code {
    private static readonly string[] _icons = [
        "Accessibility", "AlignCenter", "AlignLeft", "AlignRight", "Archive",
        "ArrowDown", "ArrowLeft", "ArrowRight", "ArrowUp", "BarChart3",
        "Bell", "BellOff", "Blocks", "Bold", "Box",
        "Calendar", "CalendarDays", "Camera", "ChartBar", "Check",
        "CheckCheck", "CheckSquare", "ChevronDown", "ChevronLeft", "ChevronRight",
        "ChevronUp", "ChevronsUpDown", "CircleAlert", "CircleCheck", "CircleDot",
        "ClipboardList", "Clipboard", "Code", "Columns3", "Copy",
        "Disc", "Download", "Ellipsis", "ExternalLink", "Eye",
        "FileText", "Flag", "FolderOpen", "Github", "Globe",
        "Heart", "Home", "House", "Image", "Inbox",
        "Info", "Italic", "LayoutDashboard", "LayoutGrid", "LayoutTemplate",
        "List", "ListMusic", "Loader", "LoaderCircle", "Lock",
        "LogIn", "LogOut", "Mail", "Menu", "MessageCircle",
        "MessageSquare", "Mic", "Minus", "Moon", "MousePointerClick",
        "Music", "Package", "Paintbrush", "Palette", "PanelRightClose",
        "PanelRightOpen", "Pause", "Pencil", "Phone", "Pin",
        "Play", "Plus", "Radio", "RefreshCw", "RotateCcw",
        "Search", "SearchX", "Send", "Settings", "Share",
        "Share2", "Shield", "ShieldCheck", "SkipBack", "SkipForward",
        "Slash", "Smartphone", "Star", "Sun", "Tag",
        "Trash", "Trash2", "TrendingUp", "TriangleAlert", "Underline",
        "Upload", "User", "UserPlus", "Users", "Volume",
        "Volume1", "Volume2", "X", "Zap"
    ];

    private string _codeBasic = @"<DynamicIcon Name=""Search"" Class=""h-5 w-5"" />
<DynamicIcon Name=""Bell"" Class=""h-5 w-5"" />
<DynamicIcon Name=""Settings"" Class=""h-5 w-5"" />
<DynamicIcon Name=""User"" Class=""h-5 w-5"" />
<DynamicIcon Name=""Heart"" Class=""h-5 w-5 text-destructive"" />
<DynamicIcon Name=""Star"" Class=""h-5 w-5 text-primary"" />";

    private string _codeSizes = @"<!-- Size variants using Tailwind h-* w-* classes -->
<DynamicIcon Name=""Heart"" Class=""h-3 w-3 text-destructive"" />
<DynamicIcon Name=""Heart"" Class=""h-4 w-4 text-destructive"" />
<DynamicIcon Name=""Heart"" Class=""h-5 w-5 text-destructive"" />
<DynamicIcon Name=""Heart"" Class=""h-6 w-6 text-destructive"" />
<DynamicIcon Name=""Heart"" Class=""h-8 w-8 text-destructive"" />

<!-- Color variants -->
<DynamicIcon Name=""Star"" Class=""h-5 w-5 text-primary"" />
<DynamicIcon Name=""Bell"" Class=""h-5 w-5 text-muted-foreground"" />
<DynamicIcon Name=""Check"" Class=""h-5 w-5 text-chart-1"" />";
}
