@page "/components/flex"

<PageTitle>Flex — Lumeo</PageTitle>

<PageHeader Title="Flex" Description="A low-level flexbox container with full control over direction, alignment, and wrapping." />

<Stack Gap="8">
    <ComponentDemo Title="Basic Row" Code="@_basicCode">
        <Flex 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>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="With Spacer" Code="@_spacerCode">
        <Flex Align="center" Class="w-full">
            <Lumeo.Text Weight="semibold">Logo</Lumeo.Text>
            <Spacer />
            <Flex Gap="2">
                <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm">About</Button>
                <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm">Blog</Button>
                <Button Size="Button.ButtonSize.Sm">Sign In</Button>
            </Flex>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Centered" Code="@_centeredCode">
        <Flex Align="center" Justify="center" Class="h-32 w-full rounded-lg border border-dashed border-border">
            <Lumeo.Text Color="muted">Centered content</Lumeo.Text>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Wrapping" Code="@_wrapCode">
        <Flex Gap="2" Wrap="true" Class="w-full max-w-sm">
            @for (var i = 1; i <= 8; i++)
            {
                <Flex Class="h-10 w-20 rounded-md bg-primary/20 items-center justify-center text-sm text-primary">@i</Flex>
            }
        </Flex>
    </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">Flex</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">string?</td>
                                <td class="p-3 font-mono text-xs text-muted-foreground">"row"</td>
                                <td class="p-3 text-muted-foreground">Flex direction. Maps to flex-{value} (e.g. "row", "col", "row-reverse", "col-reverse").</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">—</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>
                            <tr>
                                <td class="p-3 font-mono text-xs text-primary">Inline</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">Use inline-flex instead of flex for inline layout.</td>
                            </tr>
                        </tbody>
                    </table>
                </Stack>
            </Stack>
        </Stack>
    </Stack>
</Stack>

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

    private string _spacerCode = @"<Flex Align=""center"">
    <Text Weight=""semibold"">Logo</Text>
    <Spacer />
    <Flex Gap=""2"">
        <Button Variant=""Button.ButtonVariant.Ghost"" Size=""Button.ButtonSize.Sm"">About</Button>
        <Button Size=""Button.ButtonSize.Sm"">Sign In</Button>
    </Flex>
</Flex>";

    private string _centeredCode = @"<Flex Align=""center"" Justify=""center"" Class=""h-32 w-full"">
    <Text Color=""muted"">Centered content</Text>
</Flex>";

    private string _wrapCode = @"<Flex Gap=""2"" Wrap=""true"">
    <div>1</div>
    <div>2</div>
    <!-- ... more items -->
</Flex>";
}
