@page "/components/button-group"

<PageTitle>ButtonGroup — Lumeo</PageTitle>

<PageHeader Title="ButtonGroup" Description="Joins multiple Buttons into a segmented bar with shared/collapsed borders and rounded first/last edges." />

<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>Group related actions that share a common visual boundary, like text-formatting controls.</li>
        <li>Present a small set of mutually related actions without relying on a dropdown.</li>
        <li>Build compact toolbars where every button belongs to the same conceptual group.</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Horizontal (default)" Code="@_horizontalCode">
        <ButtonGroup>
            <Button Variant="Button.ButtonVariant.Outline">
                <DynamicIcon Name="Bold" Class="h-4 w-4" />
            </Button>
            <Button Variant="Button.ButtonVariant.Outline">
                <DynamicIcon Name="Italic" Class="h-4 w-4" />
            </Button>
            <Button Variant="Button.ButtonVariant.Outline">
                <DynamicIcon Name="Underline" Class="h-4 w-4" />
            </Button>
        </ButtonGroup>
    </ComponentDemo>

    <ComponentDemo Title="Vertical" Code="@_verticalCode">
        <ButtonGroup Orientation="ButtonGroup.ButtonGroupOrientation.Vertical">
            <Button Variant="Button.ButtonVariant.Outline">Top</Button>
            <Button Variant="Button.ButtonVariant.Outline">Middle</Button>
            <Button Variant="Button.ButtonVariant.Outline">Bottom</Button>
        </ButtonGroup>
    </ComponentDemo>

    <ComponentDemo Title="Mixed Variants" Code="@_mixedCode">
        <ButtonGroup>
            <Button>Save</Button>
            <Button Variant="Button.ButtonVariant.Outline">Preview</Button>
            <Button Variant="Button.ButtonVariant.Ghost">Discard</Button>
        </ButtonGroup>
    </ComponentDemo>

    <ComponentDemo Title="With Labels" Code="@_labelsCode">
        <ButtonGroup>
            <Button Variant="Button.ButtonVariant.Outline">Previous</Button>
            <Button Variant="Button.ButtonVariant.Outline">1</Button>
            <Button Variant="Button.ButtonVariant.Outline">2</Button>
            <Button Variant="Button.ButtonVariant.Outline">3</Button>
            <Button Variant="Button.ButtonVariant.Outline">Next</Button>
        </ButtonGroup>
    </ComponentDemo>

    <ComponentDemo Title="Orientation — interactive preview" Code="@_interactiveOrientationCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Switch between Horizontal and Vertical to see the layout change live.</Lumeo.Text>
            <Segmented @bind-Value="_previewOrientation">
                <SegmentedItem Value="Horizontal">Horizontal</SegmentedItem>
                <SegmentedItem Value="Vertical">Vertical</SegmentedItem>
            </Segmented>
            <ButtonGroup Orientation="_bgOrientationEnum">
                <Button Variant="Button.ButtonVariant.Outline">
                    <DynamicIcon Name="Bold" Class="h-4 w-4" />
                </Button>
                <Button Variant="Button.ButtonVariant.Outline">
                    <DynamicIcon Name="Italic" Class="h-4 w-4" />
                </Button>
                <Button Variant="Button.ButtonVariant.Outline">
                    <DynamicIcon Name="Underline" Class="h-4 w-4" />
                </Button>
            </ButtonGroup>
        </Stack>
    </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">ButtonGroup</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">Orientation</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">ButtonGroupOrientation</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Horizontal</td>
                            <td class="p-3 text-muted-foreground">Layout direction of the group. Values: <code>ButtonGroup.ButtonGroupOrientation.Horizontal</code>, <code>ButtonGroup.ButtonGroupOrientation.Vertical</code>.</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">—</td>
                            <td class="p-3 text-muted-foreground">The Button elements to group together.</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 wrapper element.</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 wrapper 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> — The individual action element placed inside a ButtonGroup.</li>
        <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/split-button" class="text-primary hover:underline">SplitButton</a> — A button with a separate chevron half that opens a dropdown menu.</li>
    </ul>
</div>

@code {
    private string _previewOrientation = "Horizontal";
    private ButtonGroup.ButtonGroupOrientation _bgOrientationEnum =>
        Enum.TryParse<ButtonGroup.ButtonGroupOrientation>(_previewOrientation, out var o) ? o : ButtonGroup.ButtonGroupOrientation.Horizontal;

    private string _interactiveOrientationCode = @"<Segmented @bind-Value=""_orientation"">
    <SegmentedItem Value=""Horizontal"">Horizontal</SegmentedItem>
    <SegmentedItem Value=""Vertical"">Vertical</SegmentedItem>
</Segmented>
<ButtonGroup Orientation=""@Enum.Parse<ButtonGroup.ButtonGroupOrientation>(_orientation)"">
    <Button Variant=""Button.ButtonVariant.Outline"">Bold</Button>
    <Button Variant=""Button.ButtonVariant.Outline"">Italic</Button>
    <Button Variant=""Button.ButtonVariant.Outline"">Underline</Button>
</ButtonGroup>

@code {
    private string _orientation = ""Horizontal"";
}";

    private string _horizontalCode = @"<ButtonGroup>
    <Button Variant=""Button.ButtonVariant.Outline"">
        <Blazicon Svg=""Lucide.Bold"" class=""h-4 w-4"" />
    </Button>
    <Button Variant=""Button.ButtonVariant.Outline"">
        <Blazicon Svg=""Lucide.Italic"" class=""h-4 w-4"" />
    </Button>
    <Button Variant=""Button.ButtonVariant.Outline"">
        <Blazicon Svg=""Lucide.Underline"" class=""h-4 w-4"" />
    </Button>
</ButtonGroup>";

    private string _verticalCode = @"<ButtonGroup Orientation=""ButtonGroup.ButtonGroupOrientation.Vertical"">
    <Button Variant=""Button.ButtonVariant.Outline"">Top</Button>
    <Button Variant=""Button.ButtonVariant.Outline"">Middle</Button>
    <Button Variant=""Button.ButtonVariant.Outline"">Bottom</Button>
</ButtonGroup>";

    private string _mixedCode = @"<ButtonGroup>
    <Button>Save</Button>
    <Button Variant=""Button.ButtonVariant.Outline"">Preview</Button>
    <Button Variant=""Button.ButtonVariant.Ghost"">Discard</Button>
</ButtonGroup>";

    private string _labelsCode = @"<ButtonGroup>
    <Button Variant=""Button.ButtonVariant.Outline"">Previous</Button>
    <Button Variant=""Button.ButtonVariant.Outline"">1</Button>
    <Button Variant=""Button.ButtonVariant.Outline"">2</Button>
    <Button Variant=""Button.ButtonVariant.Outline"">3</Button>
    <Button Variant=""Button.ButtonVariant.Outline"">Next</Button>
</ButtonGroup>";
}
