@page "/components/dock"

<PageTitle>Dock — Lumeo</PageTitle>

<PageHeader Title="Dock" Description="macOS-style icon dock with mouse-proximity magnification. Items scale up as the cursor approaches them." />

<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>Application launchers or quick-action toolbars.</li>
        <li>Portfolio or showcase pages with playful navigation.</li>
        <li>Any horizontal icon bar where delightful interaction matters.</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Basic Dock" Code="@_basicCode">
        <Flex Justify="center" Class="py-8">
            <Dock>
                @foreach (var app in _apps)
                {
                    <button class="flex flex-col items-center justify-center w-12 h-12 rounded-xl bg-card border border-border/40 shadow hover:shadow-md transition-shadow" title="@app.Name">
                        <Blazicon Svg="@app.Icon" class="h-6 w-6 text-foreground/80" />
                    </button>
                }
            </Dock>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Custom Scale & Radius" Code="@_customCode">
        <Flex Justify="center" Class="py-8">
            <Dock MaxScale="2.2" MagnifyRadius="120">
                @foreach (var app in _apps.Take(4))
                {
                    <button class="flex items-center justify-center w-14 h-14 rounded-2xl bg-primary text-primary-foreground shadow-lg" title="@app.Name">
                        <Blazicon Svg="@app.Icon" class="h-7 w-7 text-primary-foreground" />
                    </button>
                }
            </Dock>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="MaxScale &amp; MagnifyRadius (interactive)">
        <Stack Gap="5">
            <Lumeo.Text Size="sm" Color="muted">Hover over the dock icons to feel the magnification. Adjust sliders to tune the effect.</Lumeo.Text>
            <Stack Gap="2">
                <Lumeo.Text Size="sm" Class="font-medium">MaxScale: @_dockMaxScale.ToString("F1")</Lumeo.Text>
                <Slider @bind-Value="_dockMaxScale" Min="1.2" Max="3.0" Step="0.1" ShowTooltip="true"
                        FormatTooltip="@(v => v.ToString("F1"))" />
            </Stack>
            <Stack Gap="2">
                <Lumeo.Text Size="sm" Class="font-medium">MagnifyRadius: @((int)_dockRadius) px</Lumeo.Text>
                <Slider @bind-Value="_dockRadius" Min="60" Max="200" Step="10" ShowTooltip="true"
                        FormatTooltip="@(v => $"{(int)v}px")" />
            </Stack>
            <Flex Justify="center" Class="py-4">
                <Dock MaxScale="@_dockMaxScale" MagnifyRadius="@((int)_dockRadius)">
                    @foreach (var app in _apps)
                    {
                        <button class="flex flex-col items-center justify-center w-12 h-12 rounded-xl bg-card border border-border/40 shadow hover:shadow-md transition-shadow" title="@app.Name">
                            <Blazicon Svg="@app.Icon" class="h-6 w-6 text-foreground/80" />
                        </button>
                    }
                </Dock>
            </Flex>
        </Stack>
    </ComponentDemo>
</Stack>

<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</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">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">null</td><td class="p-3 text-muted-foreground">The dock items (buttons, icons, etc.).</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">MaxScale</td><td class="p-3 font-mono text-xs text-muted-foreground">double</td><td class="p-3 font-mono text-xs text-muted-foreground">1.8</td><td class="p-3 text-muted-foreground">Maximum scale applied to the item nearest the cursor.</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">MagnifyRadius</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">100</td><td class="p-3 text-muted-foreground">Radius in px within which neighboring items start scaling.</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">AriaLabel</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">"Application Dock"</td><td class="p-3 text-muted-foreground">Accessible label for the toolbar container.</td></tr>
            </tbody>
        </table>
    </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/shimmer-button" class="text-primary hover:underline">ShimmerButton</a> — Animated button with shimmer border effect.</li>
        <li><a href="/components/marquee" class="text-primary hover:underline">Marquee</a> — Infinitely scrolling horizontal band, useful alongside dock toolbars.</li>
    </ul>
</div>

@code {
    // Interactive state
    private double _dockMaxScale = 1.8;
    private double _dockRadius = 100;

    record AppItem(string Name, SvgIcon Icon);
    private readonly List<AppItem> _apps = new()
    {
        new("Home",     Lucide.House),
        new("Folder",   Lucide.FolderOpen),
        new("Mail",     Lucide.Mail),
        new("Messages", Lucide.MessageCircle),
        new("Music",    Lucide.Music),
        new("Images",   Lucide.Image),
    };

    private string _basicCode = @"<Dock>
    <button class=""w-12 h-12 rounded-xl bg-card border border-border/40 flex items-center justify-center"" title=""Home"">
        <Blazicon Svg=""Lucide.House"" class=""h-6 w-6 text-foreground/80"" />
    </button>
    <button class=""w-12 h-12 rounded-xl bg-card border border-border/40 flex items-center justify-center"" title=""Files"">
        <Blazicon Svg=""Lucide.FolderOpen"" class=""h-6 w-6 text-foreground/80"" />
    </button>
    <button class=""w-12 h-12 rounded-xl bg-card border border-border/40 flex items-center justify-center"" title=""Mail"">
        <Blazicon Svg=""Lucide.Mail"" class=""h-6 w-6 text-foreground/80"" />
    </button>
</Dock>";

    private string _customCode = @"<Dock MaxScale=""2.2"" MagnifyRadius=""120"">
    <!-- dock items with Blazicon icons -->
</Dock>";
}
