@page "/components/dropdown-button"

<PageTitle>DropdownButton — Lumeo</PageTitle>

<PageHeader Title="DropdownButton" Description="A button whose click opens a dropdown menu of secondary actions, indicated by a chevron." />

<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>Expose a list of actions from a single trigger when there is no dominant primary action.</li>
        <li>Replace a row of overflow actions in toolbars or card headers.</li>
        <li>Provide contextual operations (edit, share, delete) without cluttering the surface.</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Basic" Code="@_basicCode">
        <DropdownButton Text="Actions">
            <MenuContent>
                <DropdownMenuItem>Edit</DropdownMenuItem>
                <DropdownMenuItem>Duplicate</DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem>Delete</DropdownMenuItem>
            </MenuContent>
        </DropdownButton>
    </ComponentDemo>

    <ComponentDemo Title="Variants" Code="@_variantsCode">
        <Flex Gap="2" Wrap="true">
            <DropdownButton Text="Default">
                <MenuContent>
                    <DropdownMenuItem>Option A</DropdownMenuItem>
                    <DropdownMenuItem>Option B</DropdownMenuItem>
                </MenuContent>
            </DropdownButton>
            <DropdownButton Text="Secondary" Variant="Button.ButtonVariant.Secondary">
                <MenuContent>
                    <DropdownMenuItem>Option A</DropdownMenuItem>
                    <DropdownMenuItem>Option B</DropdownMenuItem>
                </MenuContent>
            </DropdownButton>
            <DropdownButton Text="Outline" Variant="Button.ButtonVariant.Outline">
                <MenuContent>
                    <DropdownMenuItem>Option A</DropdownMenuItem>
                    <DropdownMenuItem>Option B</DropdownMenuItem>
                </MenuContent>
            </DropdownButton>
            <DropdownButton Text="Destructive" Variant="Button.ButtonVariant.Destructive">
                <MenuContent>
                    <DropdownMenuItem>Remove</DropdownMenuItem>
                    <DropdownMenuItem>Purge</DropdownMenuItem>
                </MenuContent>
            </DropdownButton>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Sizes" Code="@_sizesCode">
        <Flex Gap="2" Wrap="true" Align="center">
            <DropdownButton Text="Small" Size="Button.ButtonSize.Sm">
                <MenuContent>
                    <DropdownMenuItem>Option A</DropdownMenuItem>
                    <DropdownMenuItem>Option B</DropdownMenuItem>
                </MenuContent>
            </DropdownButton>
            <DropdownButton Text="Default">
                <MenuContent>
                    <DropdownMenuItem>Option A</DropdownMenuItem>
                    <DropdownMenuItem>Option B</DropdownMenuItem>
                </MenuContent>
            </DropdownButton>
            <DropdownButton Text="Large" Size="Button.ButtonSize.Lg">
                <MenuContent>
                    <DropdownMenuItem>Option A</DropdownMenuItem>
                    <DropdownMenuItem>Option B</DropdownMenuItem>
                </MenuContent>
            </DropdownButton>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Disabled" Code="@_disabledCode">
        <DropdownButton Text="Disabled" Disabled="true">
            <MenuContent>
                <DropdownMenuItem>Option A</DropdownMenuItem>
            </MenuContent>
        </DropdownButton>
    </ComponentDemo>
</Stack>

<!-- 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">DropdownButton</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">Text</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">Button label text. Ignored when ChildContent is provided.</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">Custom button label content. Takes precedence over Text.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">MenuContent</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 dropdown menu items rendered inside the menu. Place DropdownMenuItem elements here.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Variant</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Button.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, Secondary, Destructive, Outline, 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">Button.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: Sm, Default, Lg.</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 the button and prevents the menu from opening.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Class</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">Additional CSS classes applied to the button.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">AdditionalAttributes</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Dictionary&lt;string, object&gt;?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Additional HTML attributes forwarded to the trigger element.</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/button" class="text-primary hover:underline">Button</a> — A standard single-action trigger.</li>
        <li><a href="/components/split-button" class="text-primary hover:underline">SplitButton</a> — A split button with a separate main action and a dropdown chevron half.</li>
        <li><a href="/components/dropdown-menu" class="text-primary hover:underline">DropdownMenu</a> — The underlying dropdown menu primitive used by DropdownButton.</li>
    </ul>
</div>

@code {
    private string _basicCode = @"<DropdownButton Text=""Actions"">
    <MenuContent>
        <DropdownMenuItem>Edit</DropdownMenuItem>
        <DropdownMenuItem>Duplicate</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Delete</DropdownMenuItem>
    </MenuContent>
</DropdownButton>";

    private string _variantsCode = @"<DropdownButton Text=""Default"">
    <MenuContent>
        <DropdownMenuItem>Option A</DropdownMenuItem>
        <DropdownMenuItem>Option B</DropdownMenuItem>
    </MenuContent>
</DropdownButton>
<DropdownButton Text=""Secondary"" Variant=""Button.ButtonVariant.Secondary"">
    <MenuContent>
        <DropdownMenuItem>Option A</DropdownMenuItem>
        <DropdownMenuItem>Option B</DropdownMenuItem>
    </MenuContent>
</DropdownButton>
<DropdownButton Text=""Outline"" Variant=""Button.ButtonVariant.Outline"">
    <MenuContent>
        <DropdownMenuItem>Option A</DropdownMenuItem>
        <DropdownMenuItem>Option B</DropdownMenuItem>
    </MenuContent>
</DropdownButton>";

    private string _sizesCode = @"<DropdownButton Text=""Small"" Size=""Button.ButtonSize.Sm"">
    <MenuContent>
        <DropdownMenuItem>Option A</DropdownMenuItem>
    </MenuContent>
</DropdownButton>
<DropdownButton Text=""Default"">
    <MenuContent>
        <DropdownMenuItem>Option A</DropdownMenuItem>
    </MenuContent>
</DropdownButton>
<DropdownButton Text=""Large"" Size=""Button.ButtonSize.Lg"">
    <MenuContent>
        <DropdownMenuItem>Option A</DropdownMenuItem>
    </MenuContent>
</DropdownButton>";

    private string _disabledCode = @"<DropdownButton Text=""Disabled"" Disabled=""true"">
    <MenuContent>
        <DropdownMenuItem>Option A</DropdownMenuItem>
    </MenuContent>
</DropdownButton>";
}
