@page "/components/stack"

<PageTitle>Stack — Lumeo</PageTitle>

<PageHeader Title="Stack" Description="A flex-based layout component for stacking elements vertically or horizontally with consistent spacing." />

<Stack Gap="8">
    <ComponentDemo Title="Basic Vertical" Code="@_basicCode">
        <Stack Gap="3" Class="w-full max-w-xs">
            <Flex Class="h-10 rounded-md bg-primary/20 items-center justify-center text-sm text-primary">Item 1</Flex>
            <Flex Class="h-10 rounded-md bg-primary/20 items-center justify-center text-sm text-primary">Item 2</Flex>
            <Flex Class="h-10 rounded-md bg-primary/20 items-center justify-center text-sm text-primary">Item 3</Flex>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Horizontal" Code="@_horizontalCode">
        <Stack Direction="Stack.StackDirection.Horizontal" Gap="3">
            <Flex Class="h-10 w-24 rounded-md bg-primary/20 items-center justify-center text-sm text-primary">Item 1</Flex>
            <Flex Class="h-10 w-24 rounded-md bg-primary/20 items-center justify-center text-sm text-primary">Item 2</Flex>
            <Flex Class="h-10 w-24 rounded-md bg-primary/20 items-center justify-center text-sm text-primary">Item 3</Flex>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Gap Sizes" Code="@_gapCode">
        <Stack Gap="6" Class="w-full">
            <Stack>
                <Lumeo.Text Size="sm" Color="muted" Class="mb-2">Gap 1</Lumeo.Text>
                <Stack Direction="Stack.StackDirection.Horizontal" Gap="1">
                    <Stack Class="h-8 w-16 rounded bg-primary/20"></Stack>
                    <Stack Class="h-8 w-16 rounded bg-primary/20"></Stack>
                    <Stack Class="h-8 w-16 rounded bg-primary/20"></Stack>
                </Stack>
            </Stack>
            <Stack>
                <Lumeo.Text Size="sm" Color="muted" Class="mb-2">Gap 4</Lumeo.Text>
                <Stack Direction="Stack.StackDirection.Horizontal" Gap="4">
                    <Stack Class="h-8 w-16 rounded bg-primary/20"></Stack>
                    <Stack Class="h-8 w-16 rounded bg-primary/20"></Stack>
                    <Stack Class="h-8 w-16 rounded bg-primary/20"></Stack>
                </Stack>
            </Stack>
            <Stack>
                <Lumeo.Text Size="sm" Color="muted" Class="mb-2">Gap 8</Lumeo.Text>
                <Stack Direction="Stack.StackDirection.Horizontal" Gap="8">
                    <Stack Class="h-8 w-16 rounded bg-primary/20"></Stack>
                    <Stack Class="h-8 w-16 rounded bg-primary/20"></Stack>
                    <Stack Class="h-8 w-16 rounded bg-primary/20"></Stack>
                </Stack>
            </Stack>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Alignment" Code="@_alignCode">
        <Stack Direction="Stack.StackDirection.Horizontal" Gap="4" Align="center" Justify="between" Class="w-full">
            <Stack Class="h-8 w-20 rounded bg-primary/20"></Stack>
            <Stack Class="h-12 w-20 rounded bg-primary/20"></Stack>
            <Stack Class="h-6 w-20 rounded bg-primary/20"></Stack>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Direction — interactive" Code="@_directionInteractiveCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Pick a direction to see it applied live.</Lumeo.Text>
            <Flex Gap="2">
                <Button Size="Button.ButtonSize.Sm"
                        Variant="@(_stackDir == Stack.StackDirection.Vertical ? Button.ButtonVariant.Default : Button.ButtonVariant.Outline)"
                        OnClick="@(() => _stackDir = Stack.StackDirection.Vertical)">Vertical</Button>
                <Button Size="Button.ButtonSize.Sm"
                        Variant="@(_stackDir == Stack.StackDirection.Horizontal ? Button.ButtonVariant.Default : Button.ButtonVariant.Outline)"
                        OnClick="@(() => _stackDir = Stack.StackDirection.Horizontal)">Horizontal</Button>
            </Flex>
            <Stack Direction="@_stackDir" Gap="3">
                <Flex Class="h-10 w-24 rounded-md bg-primary/20 items-center justify-center text-sm text-primary">Item 1</Flex>
                <Flex Class="h-10 w-24 rounded-md bg-primary/20 items-center justify-center text-sm text-primary">Item 2</Flex>
                <Flex Class="h-10 w-24 rounded-md bg-primary/20 items-center justify-center text-sm text-primary">Item 3</Flex>
            </Stack>
        </Stack>
    </ComponentDemo>

    <!-- API Reference -->
    <Stack Gap="6" Class="mt-12">
        <Heading Level="2">API Reference</Heading>
        <Stack Gap="8">
            <Stack>
                <Heading Level="3" Class="mb-3">Stack</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">Direction</td>
                                <td class="p-3 font-mono text-xs text-muted-foreground">StackDirection</td>
                                <td class="p-3 font-mono text-xs text-muted-foreground">Vertical</td>
                                <td class="p-3 text-muted-foreground">Stack direction. Values: Vertical (flex-col), Horizontal (flex-row).</td>
                            </tr>
                            <tr>
                                <td class="p-3 font-mono text-xs text-primary">Gap</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">"4"</td>
                                <td class="p-3 text-muted-foreground">Spacing between items. Maps to gap-{value} (e.g. "2", "4", "8").</td>
                            </tr>
                            <tr>
                                <td class="p-3 font-mono text-xs text-primary">Align</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">Cross-axis alignment. Maps to items-{value} (e.g. "center", "start", "end").</td>
                            </tr>
                            <tr>
                                <td class="p-3 font-mono text-xs text-primary">Justify</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">Main-axis alignment. Maps to justify-{value} (e.g. "center", "between", "end").</td>
                            </tr>
                            <tr>
                                <td class="p-3 font-mono text-xs text-primary">Wrap</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">Whether items should wrap to the next line when they overflow.</td>
                            </tr>
                        </tbody>
                    </table>
                </Stack>
            </Stack>
        </Stack>
    </Stack>
</Stack>

@code {
    private Stack.StackDirection _stackDir = Stack.StackDirection.Vertical;

    private string _directionInteractiveCode = @"<Stack Direction=""Stack.StackDirection.Horizontal"" Gap=""3"">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</Stack>";

    private string _basicCode = @"<Stack Gap=""3"">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</Stack>";

    private string _horizontalCode = @"<Stack Direction=""Stack.StackDirection.Horizontal"" Gap=""3"">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</Stack>";

    private string _gapCode = @"<Stack Direction=""Stack.StackDirection.Horizontal"" Gap=""1"">...</Stack>
<Stack Direction=""Stack.StackDirection.Horizontal"" Gap=""4"">...</Stack>
<Stack Direction=""Stack.StackDirection.Horizontal"" Gap=""8"">...</Stack>";

    private string _alignCode = @"<Stack Direction=""Stack.StackDirection.Horizontal"" Gap=""4"" Align=""center"" Justify=""between"" Class=""w-full"">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</Stack>";
}
