@page "/components/spacer"

<PageTitle>Spacer — Lumeo</PageTitle>

<PageHeader Title="Spacer" Description="A flexible spacer that expands to fill available space or renders at a fixed size." />

<Stack Gap="8">
    <ComponentDemo Title="Flex Spacer" Code="@_flexCode">
        <Flex Align="center" Class="w-full p-3 rounded-lg border border-border/40">
            <Lumeo.Text Weight="semibold">Brand</Lumeo.Text>
            <Spacer />
            <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Sm">Login</Button>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Fixed Size" Code="@_fixedCode">
        <Stack Direction="Stack.StackDirection.Horizontal" Align="center">
            <Stack Class="h-10 w-10 rounded-full bg-primary/20"></Stack>
            <Spacer Size="4" />
            <Stack Gap="0">
                <Lumeo.Text Weight="medium" Size="sm">Jane Doe</Lumeo.Text>
                <Lumeo.Text Color="muted" Size="xs">jane@example.com</Lumeo.Text>
            </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">Spacer</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">Size</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">Fixed Tailwind size value. When unset, expands with flex-1. When set, renders as w-{Size} h-{Size}.</td>
                            </tr>
                        </tbody>
                    </table>
                </Stack>
            </Stack>
        </Stack>
    </Stack>
</Stack>

@code {
    private string _flexCode = @"<Flex Align=""center"">
    <Text Weight=""semibold"">Brand</Text>
    <Spacer />
    <Button Variant=""Button.ButtonVariant.Outline"" Size=""Button.ButtonSize.Sm"">Login</Button>
</Flex>";

    private string _fixedCode = @"<Stack Direction=""Stack.StackDirection.Horizontal"" Align=""center"">
    <Avatar />
    <Spacer Size=""4"" />
    <Stack Gap=""0"">
        <Text Weight=""medium"" Size=""sm"">Jane Doe</Text>
        <Text Color=""muted"" Size=""xs"">jane@example.com</Text>
    </Stack>
</Stack>";
}
