@page "/components/button"

<PageTitle>Button — Lumeo</PageTitle>

<PageHeader Title="Button" Description="Displays a button or a component that looks like a button." />

<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>Trigger primary actions such as form submissions, confirmations, or saving data.</li>
        <li>Navigate users to a new page or section when styled as a link variant.</li>
        <li>Provide call-to-action elements in hero sections, cards, or toolbars.</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Variants" Code="@_variantCode">
        <Flex Gap="2" Wrap="true">
            <Button>Default</Button>
            <Button Variant="Button.ButtonVariant.Secondary">Secondary</Button>
            <Button Variant="Button.ButtonVariant.Destructive">Destructive</Button>
            <Button Variant="Button.ButtonVariant.Outline">Outline</Button>
            <Button Variant="Button.ButtonVariant.Ghost">Ghost</Button>
            <Button Variant="Button.ButtonVariant.Link">Link</Button>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Sizes" Code="@_sizeCode">
        <Flex Gap="2" Wrap="true" Align="center">
            <Button Size="Button.ButtonSize.Sm">Small</Button>
            <Button>Default</Button>
            <Button Size="Button.ButtonSize.Lg">Large</Button>
            <Button Size="Button.ButtonSize.Icon">
                <DynamicIcon Name="ChevronRight" Class="h-4 w-4" />
            </Button>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="With Icon" Code="@_iconCode">
        <Flex Gap="2" Wrap="true">
            <Button>
                <DynamicIcon Name="Mail" Class="h-4 w-4" />
                Login with Email
            </Button>
            <Button Variant="Button.ButtonVariant.Secondary">
                <DynamicIcon Name="LoaderCircle" Class="h-4 w-4 animate-spin" />
                Please wait
            </Button>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Disabled" Code="@_disabledCode">
        <Flex Gap="2" Wrap="true">
            <Button disabled>Disabled</Button>
            <Button Variant="Button.ButtonVariant.Outline" disabled>Disabled</Button>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Button Group" Code="@_groupCode">
        <Flex>
            <Button Variant="Button.ButtonVariant.Outline" Class="rounded-r-none border-r-0">
                <DynamicIcon Name="Bold" Class="h-4 w-4" />
            </Button>
            <Button Variant="Button.ButtonVariant.Outline" Class="rounded-none border-r-0">
                <DynamicIcon Name="Italic" Class="h-4 w-4" />
            </Button>
            <Button Variant="Button.ButtonVariant.Outline" Class="rounded-l-none">
                <DynamicIcon Name="Underline" Class="h-4 w-4" />
            </Button>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Loading State" Code="@_loadingCode">
        <Flex Gap="2" Wrap="true">
            <Button Disabled="@_isLoading" OnClick="@SimulateLoad">
                @if (_isLoading)
                {
                    <DynamicIcon Name="LoaderCircle" Class="h-4 w-4 animate-spin" />
                    <Lumeo.Text As="span">Please wait</Lumeo.Text>
                }
                else
                {
                    <Lumeo.Text As="span">Submit</Lumeo.Text>
                }
            </Button>
            <Button Variant="Button.ButtonVariant.Outline" Disabled="@_isLoading" OnClick="@SimulateLoad">
                @if (_isLoading)
                {
                    <DynamicIcon Name="LoaderCircle" Class="h-4 w-4 animate-spin" />
                    <Lumeo.Text As="span">Saving...</Lumeo.Text>
                }
                else
                {
                    <Lumeo.Text As="span">Save Draft</Lumeo.Text>
                }
            </Button>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="IsLoading" Code="@_isLoadingCode">
        <Flex Gap="2" Wrap="true">
            <Button IsLoading="@_btnLoading" OnClick="@HandleLoadingClick">Submit</Button>
            <Button IsLoading="@_btnLoading" LoadingText="Saving..." Variant="Button.ButtonVariant.Outline" OnClick="@HandleLoadingClick">Save</Button>
            <Button IsLoading="true" Variant="Button.ButtonVariant.Secondary">Always Loading</Button>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Press Effect" Code="@_pressEffectCode">
        <Flex Gap="2" Wrap="true">
            <Button PressEffect="Button.ButtonPressEffect.None">None</Button>
            <Button PressEffect="Button.ButtonPressEffect.Scale">Scale</Button>
            <Button PressEffect="Button.ButtonPressEffect.Brightness" Variant="Button.ButtonVariant.Secondary">Brightness</Button>
            <Button PressEffect="Button.ButtonPressEffect.Ripple">Ripple</Button>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Variant — interactive preview" Code="@_interactiveVariantCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Pick a variant to see it applied to the button below.</Lumeo.Text>
            <Segmented @bind-Value="_previewVariant">
                <SegmentedItem Value="Default">Default</SegmentedItem>
                <SegmentedItem Value="Secondary">Secondary</SegmentedItem>
                <SegmentedItem Value="Destructive">Destructive</SegmentedItem>
                <SegmentedItem Value="Outline">Outline</SegmentedItem>
                <SegmentedItem Value="Ghost">Ghost</SegmentedItem>
                <SegmentedItem Value="Link">Link</SegmentedItem>
            </Segmented>
            <Button Variant="_btnPreviewVariant">
                Button — @_previewVariant
            </Button>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Size — interactive preview" Code="@_interactiveSizeCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Pick a size to see it applied live.</Lumeo.Text>
            <Segmented @bind-Value="_previewSize">
                <SegmentedItem Value="Sm">Sm</SegmentedItem>
                <SegmentedItem Value="Default">Default</SegmentedItem>
                <SegmentedItem Value="Lg">Lg</SegmentedItem>
                <SegmentedItem Value="Icon">Icon</SegmentedItem>
            </Segmented>
            @if (_previewSize == "Icon")
            {
                <Button Size="Button.ButtonSize.Icon">
                    <DynamicIcon Name="ChevronRight" Class="h-4 w-4" />
                </Button>
            }
            else
            {
                <Button Size="_btnPreviewSize">
                    Button — @_previewSize
                </Button>
            }
        </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>Enter</Kbd></TableCell><TableCell>Activates the button.</TableCell></TableRow>
                <TableRow><TableCell><Kbd>Space</Kbd></TableCell><TableCell>Activates the button.</TableCell></TableRow>
                <TableRow><TableCell><Kbd>Tab</Kbd></TableCell><TableCell>Moves focus to the next focusable element.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>
</div>

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

    <Stack Gap="8" Class="mt-8">
        <Stack Gap="3">
            <Heading Level="3">Button</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">Variant</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">ButtonVariant</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Default</td>
                            <td class="p-3 text-muted-foreground">Visual style of the button. Values: Default, Destructive, Outline, Secondary, Ghost, Link.</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">ButtonSize</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Default</td>
                            <td class="p-3 text-muted-foreground">Size of the button. Values: Default, Sm, Lg, Icon.</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&lt;MouseEventArgs&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Callback invoked when the button is clicked.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">IsLoading</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">Shows a loading spinner and disables the button.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">LoadingText</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">Text to display while loading instead of children.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">PressEffect</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">ButtonPressEffect</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">None</td>
                            <td class="p-3 text-muted-foreground">Visual feedback while pressed. Values: None, Scale, Brightness, Ripple. Respects <code>prefers-reduced-motion</code>.</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">Disables user interaction and dims the button.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">FullWidth</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">Stretches the button to fill its container's width.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">LeftIcon</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">Slot rendered before the button label.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">RightIcon</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">Slot rendered after the button label.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Type</td><td class="p-3 font-mono text-xs text-muted-foreground">ButtonType</td><td class="p-3 font-mono text-xs text-muted-foreground">Button</td><td class="p-3 text-muted-foreground">HTML button type attribute. Values: Button, Submit, Reset. Defaults to Button to prevent accidental form submission.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">StopPropagation</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">When true, stops the click event from bubbling up to parent elements.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">PreventDefault</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">When true, prevents the default browser action on click (e.g. link navigation).</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">null</td><td class="p-3 text-muted-foreground">Content rendered inside the button.</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/toggle" class="text-primary hover:underline">Toggle</a> — A two-state button for on/off actions like bold or mute.</li>
        <li><a href="/components/toggle-group" class="text-primary hover:underline">ToggleGroup</a> — A group of toggles for selecting one or more options from a set.</li>
        <li><a href="/components/dropdown-menu" class="text-primary hover:underline">DropdownMenu</a> — Use when a button needs to reveal a list of actions.</li>
    </ul>
</div>

@code {
    private string _variantCode = @"<Button>Default</Button>
<Button Variant=""Button.ButtonVariant.Secondary"">Secondary</Button>
<Button Variant=""Button.ButtonVariant.Destructive"">Destructive</Button>
<Button Variant=""Button.ButtonVariant.Outline"">Outline</Button>
<Button Variant=""Button.ButtonVariant.Ghost"">Ghost</Button>
<Button Variant=""Button.ButtonVariant.Link"">Link</Button>";

    private string _sizeCode = @"<Button Size=""Button.ButtonSize.Sm"">Small</Button>
<Button>Default</Button>
<Button Size=""Button.ButtonSize.Lg"">Large</Button>
<Button Size=""Button.ButtonSize.Icon"">
    <Blazicon Svg=""Lucide.ChevronRight"" class=""h-4 w-4"" />
</Button>";

    private string _iconCode = @"<Button>
    <Blazicon Svg=""Lucide.Mail"" class=""h-4 w-4"" />
    Login with Email
</Button>
<Button Variant=""Button.ButtonVariant.Secondary"">
    <Blazicon Svg=""Lucide.Loader2"" class=""h-4 w-4 animate-spin"" />
    Please wait
</Button>";

    private string _disabledCode = @"<Button disabled>Disabled</Button>
<Button Variant=""Button.ButtonVariant.Outline"" disabled>Disabled</Button>";

    private bool _isLoading = false;

    private async Task SimulateLoad()
    {
        _isLoading = true;
        await Task.Delay(2000);
        _isLoading = false;
    }

    private string _groupCode = @"<Flex>
    <Button Variant=""Button.ButtonVariant.Outline"" Class=""rounded-r-none border-r-0"">
        <Blazicon Svg=""Lucide.Bold"" class=""h-4 w-4"" />
    </Button>
    <Button Variant=""Button.ButtonVariant.Outline"" Class=""rounded-none border-r-0"">
        <Blazicon Svg=""Lucide.Italic"" class=""h-4 w-4"" />
    </Button>
    <Button Variant=""Button.ButtonVariant.Outline"" Class=""rounded-l-none"">
        <Blazicon Svg=""Lucide.Underline"" class=""h-4 w-4"" />
    </Button>
</Flex>";

    private string _loadingCode = @"<Button Disabled=""@_isLoading"" OnClick=""SimulateLoad"">
    @if (_isLoading)
    {
        <Blazicon Svg=""Lucide.LoaderCircle"" class=""h-4 w-4 animate-spin"" />
        <span>Please wait</span>
    }
    else { <span>Submit</span> }
</Button>

@code {
    private bool _isLoading = false;
    private async Task SimulateLoad()
    {
        _isLoading = true;
        await Task.Delay(2000);
        _isLoading = false;
    }
}";

    private bool _btnLoading;

    private async Task HandleLoadingClick()
    {
        _btnLoading = true;
        await Task.Delay(2000);
        _btnLoading = false;
    }

    private string _pressEffectCode = @"<Button PressEffect=""Button.ButtonPressEffect.None"">None</Button>
<Button PressEffect=""Button.ButtonPressEffect.Scale"">Scale</Button>
<Button PressEffect=""Button.ButtonPressEffect.Brightness"" Variant=""Button.ButtonVariant.Secondary"">Brightness</Button>
<Button PressEffect=""Button.ButtonPressEffect.Ripple"">Ripple</Button>";

    private string _previewVariant = "Default";
    private string _previewSize = "Default";

    private Button.ButtonVariant _btnPreviewVariant =>
        Enum.TryParse<Button.ButtonVariant>(_previewVariant, out var v) ? v : Button.ButtonVariant.Default;
    private Button.ButtonSize _btnPreviewSize =>
        Enum.TryParse<Button.ButtonSize>(_previewSize, out var s) ? s : Button.ButtonSize.Default;

    private string _interactiveVariantCode = @"<Segmented @bind-Value=""_variant"">
    <SegmentedItem Value=""Default"">Default</SegmentedItem>
    <SegmentedItem Value=""Secondary"">Secondary</SegmentedItem>
    <SegmentedItem Value=""Destructive"">Destructive</SegmentedItem>
    <SegmentedItem Value=""Outline"">Outline</SegmentedItem>
    <SegmentedItem Value=""Ghost"">Ghost</SegmentedItem>
    <SegmentedItem Value=""Link"">Link</SegmentedItem>
</Segmented>
<Button Variant=""@Enum.Parse<Button.ButtonVariant>(_variant)"">Button — @_variant</Button>

@code {
    private string _variant = ""Default"";
}";

    private string _interactiveSizeCode = @"<Segmented @bind-Value=""_size"">
    <SegmentedItem Value=""Sm"">Sm</SegmentedItem>
    <SegmentedItem Value=""Default"">Default</SegmentedItem>
    <SegmentedItem Value=""Lg"">Lg</SegmentedItem>
    <SegmentedItem Value=""Icon"">Icon</SegmentedItem>
</Segmented>
<Button Size=""@Enum.Parse<Button.ButtonSize>(_size)"">Button — @_size</Button>

@code {
    private string _size = ""Default"";
}";

    private string _isLoadingCode = @"<Button IsLoading=""@_btnLoading"" OnClick=""@HandleLoadingClick"">Submit</Button>
<Button IsLoading=""@_btnLoading"" LoadingText=""Saving..."" Variant=""Button.ButtonVariant.Outline"" OnClick=""@HandleLoadingClick"">Save</Button>
<Button IsLoading=""true"" Variant=""Button.ButtonVariant.Secondary"">Always Loading</Button>

@code {
    private bool _btnLoading;
    private async Task HandleLoadingClick()
    {
        _btnLoading = true;
        await Task.Delay(2000);
        _btnLoading = false;
    }
}";
}
