@page "/components/segmented"

<PageTitle>Segmented — Lumeo</PageTitle>

<PageHeader Title="Segmented" Description="An iOS-style segmented control for switching between options." />

<Stack Gap="8">
    <ComponentDemo Title="Basic" Code="@_codeBasic">
        <Segmented @bind-Value="_seg1" Options="_basicOptions" />
    </ComponentDemo>

    <ComponentDemo Title="Block (Full Width)" Code="@_codeBlock">
        <Segmented @bind-Value="_seg2" Options="_basicOptions" Block="true" Class="max-w-sm" />
    </ComponentDemo>

    <ComponentDemo Title="With Disabled Option" Code="@_codeDisabled">
        <Segmented @bind-Value="_seg3" Options="_disabledOptions" />
    </ComponentDemo>
</Stack>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</Heading>
    <Stack Gap="8">
        <Stack Gap="3">
            <Heading Level="3">Segmented</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">Value</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">Currently selected value.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Options</td><td class="p-3 font-mono text-xs text-muted-foreground">List&lt;SegmentedOption&gt;?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">List of segment options.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Block</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">Stretch to fill available width.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">ValueChanged</td><td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;string&gt;</td><td class="p-3 font-mono text-xs text-muted-foreground">—</td><td class="p-3 text-muted-foreground">Callback for two-way binding when the selected value changes.</td></tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>
        <Stack Gap="3">
            <Heading Level="3">SegmentedOption</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">Label</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">Display text.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Value</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">Selection value.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Icon</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">Optional icon before the label.</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 this option.</td></tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>
    </Stack>
</Stack>

@code {
    private string _seg1 = "daily";
    private string _seg2 = "daily";
    private string _seg3 = "daily";

    private List<Segmented.SegmentedOption> _basicOptions = new()
    {
        new() { Label = "Daily", Value = "daily" },
        new() { Label = "Weekly", Value = "weekly" },
        new() { Label = "Monthly", Value = "monthly" },
    };

    private List<Segmented.SegmentedOption> _disabledOptions = new()
    {
        new() { Label = "Daily", Value = "daily" },
        new() { Label = "Weekly", Value = "weekly", Disabled = true },
        new() { Label = "Monthly", Value = "monthly" },
    };

    private string _codeBasic = @"<Segmented @bind-Value=""_value"" Options=""_options"" />";
    private string _codeBlock = @"<Segmented @bind-Value=""_value"" Options=""_options"" Block=""true"" />";
    private string _codeDisabled = @"new SegmentedOption { Label = ""Weekly"", Value = ""weekly"", Disabled = true }";
}
