@page "/components/separator"

<PageTitle>Separator — Lumeo</PageTitle>

<PageHeader Title="Separator" Description="Visually or semantically separates content." />

<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>Visual dividers between content sections on a page</li>
        <li>Section breaks in cards, dialogs, or sidebars</li>
        <li>Menu separators to group related items in dropdown or context menus</li>
        <li>Inline breadcrumb-style dividers between horizontal navigation links</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Horizontal" Code="@_horizontalCode">
        <Container MaxWidth="sm">
            <Stack Gap="1">
                <Heading Level="4" Size="sm" Weight="medium" Class="leading-none">Lumeo UI</Heading>
                <Lumeo.Text Size="sm" Color="muted">An open-source component library for Blazor.</Lumeo.Text>
            </Stack>
            <Separator Class="my-4" />
            <Flex Gap="4" Align="center" Class="h-5 text-sm">
                <Lumeo.Text As="span" Size="sm">Docs</Lumeo.Text>
                <Separator Orientation="Separator.SeparatorOrientation.Vertical" />
                <Lumeo.Text As="span" Size="sm">Source</Lumeo.Text>
                <Separator Orientation="Separator.SeparatorOrientation.Vertical" />
                <Lumeo.Text As="span" Size="sm">Blog</Lumeo.Text>
            </Flex>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="In a Card" Code="@_cardCode">
        <Container MaxWidth="sm">
            <Card>
                <CardContent Class="pt-4">
                    <Stack Gap="3">
                        <Flex Align="center" Justify="between" Class="text-sm">
                            <Lumeo.Text As="span" Size="sm" Color="muted">Subtotal</Lumeo.Text>
                            <Lumeo.Text As="span" Size="sm" Weight="medium">$89.00</Lumeo.Text>
                        </Flex>
                        <Flex Align="center" Justify="between" Class="text-sm">
                            <Lumeo.Text As="span" Size="sm" Color="muted">Shipping</Lumeo.Text>
                            <Lumeo.Text As="span" Size="sm" Weight="medium">$4.99</Lumeo.Text>
                        </Flex>
                        <Flex Align="center" Justify="between" Class="text-sm">
                            <Lumeo.Text As="span" Size="sm" Color="muted">Tax</Lumeo.Text>
                            <Lumeo.Text As="span" Size="sm" Weight="medium">$7.12</Lumeo.Text>
                        </Flex>
                        <Separator />
                        <Flex Align="center" Justify="between" Class="text-sm font-semibold">
                            <Lumeo.Text As="span" Size="sm" Weight="semibold">Total</Lumeo.Text>
                            <Lumeo.Text As="span" Size="sm" Weight="semibold">$101.11</Lumeo.Text>
                        </Flex>
                    </Stack>
                </CardContent>
            </Card>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Vertical" Code="@_verticalCode">
        <Flex Align="center" Gap="4" Class="h-5 text-sm">
            <Lumeo.Text As="span" Size="sm">Home</Lumeo.Text>
            <Separator Orientation="Separator.SeparatorOrientation.Vertical" />
            <Lumeo.Text As="span" Size="sm">Components</Lumeo.Text>
            <Separator Orientation="Separator.SeparatorOrientation.Vertical" />
            <Lumeo.Text As="span" Size="sm">Themes</Lumeo.Text>
            <Separator Orientation="Separator.SeparatorOrientation.Vertical" />
            <Lumeo.Text As="span" Size="sm">GitHub</Lumeo.Text>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="With Label" Code="@_labelCode">
        <Stack Gap="6" Class="w-full max-w-md">
            <Separator>or continue with</Separator>
            <Separator>Section Title</Separator>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Orientation — interactive" Code="@_orientationInteractiveCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Pick an orientation to see it applied live.</Lumeo.Text>
            <Flex Gap="2">
                <Button Size="Button.ButtonSize.Sm"
                        Variant="@(_sepOrientation == Separator.SeparatorOrientation.Horizontal ? Button.ButtonVariant.Default : Button.ButtonVariant.Outline)"
                        OnClick="@(() => _sepOrientation = Separator.SeparatorOrientation.Horizontal)">Horizontal</Button>
                <Button Size="Button.ButtonSize.Sm"
                        Variant="@(_sepOrientation == Separator.SeparatorOrientation.Vertical ? Button.ButtonVariant.Default : Button.ButtonVariant.Outline)"
                        OnClick="@(() => _sepOrientation = Separator.SeparatorOrientation.Vertical)">Vertical</Button>
            </Flex>
            @if (_sepOrientation == Separator.SeparatorOrientation.Horizontal)
            {
                <Stack Gap="2" Class="w-full max-w-xs">
                    <Lumeo.Text Size="sm">Above the separator</Lumeo.Text>
                    <Separator Orientation="Separator.SeparatorOrientation.Horizontal" />
                    <Lumeo.Text Size="sm">Below the separator</Lumeo.Text>
                </Stack>
            }
            else
            {
                <Flex Align="center" Gap="4" Class="h-8">
                    <Lumeo.Text Size="sm">Left</Lumeo.Text>
                    <Separator Orientation="Separator.SeparatorOrientation.Vertical" />
                    <Lumeo.Text Size="sm">Right</Lumeo.Text>
                </Flex>
            }
        </Stack>
    </ComponentDemo>
</Stack>

<div class="mt-16">
    <Heading Id="api-reference" Level="2" Class="scroll-mt-20">API Reference</Heading>

    <Heading Id="separator" Level="3" Class="mt-8 scroll-mt-20">Separator</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">Orientation</TableCell><TableCell Class="font-mono text-xs">SeparatorOrientation</TableCell><TableCell Class="font-mono text-xs">Horizontal</TableCell><TableCell>Direction of the separator line. Values: Horizontal, Vertical.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Label text displayed in the center of a horizontal separator.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>
</div>

<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/card" class="text-primary hover:underline">Card</a> — Grouped content containers where separators divide sections</li>
        <li><a href="/components/accordion" class="text-primary hover:underline">Accordion</a> — Collapsible sections that visually separate content groups</li>
        <li><a href="/components/dropdown-menu" class="text-primary hover:underline">DropdownMenu</a> — Uses separators to divide menu item groups</li>
    </ul>
</div>

@code {
    private Separator.SeparatorOrientation _sepOrientation = Separator.SeparatorOrientation.Horizontal;

    private string _orientationInteractiveCode = @"@* Horizontal *@
<Separator />

@* Vertical (use inside a flex row with a fixed height) *@
<Flex Align=""center"" Gap=""4"" Class=""h-8"">
    <Lumeo.Text Size=""sm"">Left</Lumeo.Text>
    <Separator Orientation=""Separator.SeparatorOrientation.Vertical"" />
    <Lumeo.Text Size=""sm"">Right</Lumeo.Text>
</Flex>";

    private string _horizontalCode = @"<Stack Gap=""1"">
    <Heading Level=""4"" Size=""sm"" Weight=""medium"" Class=""leading-none"">Lumeo UI</Heading>
    <Lumeo.Text Size=""sm"" Color=""muted"">An open-source component library for Blazor.</Lumeo.Text>
</Stack>
<Separator Class=""my-4"" />
<Flex Gap=""4"" Align=""center"" Class=""h-5 text-sm"">
    <Lumeo.Text As=""span"" Size=""sm"">Docs</Lumeo.Text>
    <Separator Orientation=""Separator.SeparatorOrientation.Vertical"" />
    <Lumeo.Text As=""span"" Size=""sm"">Source</Lumeo.Text>
    <Separator Orientation=""Separator.SeparatorOrientation.Vertical"" />
    <Lumeo.Text As=""span"" Size=""sm"">Blog</Lumeo.Text>
</Flex>";

    private string _cardCode = @"<Card>
    <CardContent Class=""pt-4"">
        <Stack Gap=""3"">
            <Flex Align=""center"" Justify=""between"" Class=""text-sm"">
                <Lumeo.Text As=""span"" Size=""sm"" Color=""muted"">Subtotal</Lumeo.Text>
                <Lumeo.Text As=""span"" Size=""sm"" Weight=""medium"">$89.00</Lumeo.Text>
            </Flex>
            <Flex Align=""center"" Justify=""between"" Class=""text-sm"">
                <Lumeo.Text As=""span"" Size=""sm"" Color=""muted"">Shipping</Lumeo.Text>
                <Lumeo.Text As=""span"" Size=""sm"" Weight=""medium"">$4.99</Lumeo.Text>
            </Flex>
            <Separator />
            <Flex Align=""center"" Justify=""between"" Class=""text-sm font-semibold"">
                <Lumeo.Text As=""span"" Size=""sm"" Weight=""semibold"">Total</Lumeo.Text>
                <Lumeo.Text As=""span"" Size=""sm"" Weight=""semibold"">$93.99</Lumeo.Text>
            </Flex>
        </Stack>
    </CardContent>
</Card>";

    private string _verticalCode = @"<Flex Gap=""4"" Align=""center"" Class=""h-5 text-sm"">
    <Lumeo.Text As=""span"" Size=""sm"">Home</Lumeo.Text>
    <Separator Orientation=""Separator.SeparatorOrientation.Vertical"" />
    <Lumeo.Text As=""span"" Size=""sm"">Components</Lumeo.Text>
    <Separator Orientation=""Separator.SeparatorOrientation.Vertical"" />
    <Lumeo.Text As=""span"" Size=""sm"">Themes</Lumeo.Text>
    <Separator Orientation=""Separator.SeparatorOrientation.Vertical"" />
    <Lumeo.Text As=""span"" Size=""sm"">GitHub</Lumeo.Text>
</Flex>";

    private string _labelCode = @"<Separator>or continue with</Separator>
<Separator>Section Title</Separator>";
}
