@page "/components/grid"

<PageTitle>Grid — Lumeo</PageTitle>

<PageHeader Title="Grid" Description="A CSS grid layout component for creating multi-column layouts with consistent spacing." />

<Stack Gap="8">
    <ComponentDemo Title="Basic 3-Column" Code="@_basicCode">
        <Grid Columns="3" Gap="4" Class="w-full">
            @for (var i = 1; i <= 6; i++)
            {
                <Flex Class="h-20 rounded-md bg-primary/20 items-center justify-center text-sm text-primary">@i</Flex>
            }
        </Grid>
    </ComponentDemo>

    <ComponentDemo Title="Responsive Columns" Code="@_responsiveCode">
        <Grid Columns="2" Gap="4" Class="w-full md:grid-cols-4">
            @for (var i = 1; i <= 8; i++)
            {
                <Flex Class="h-16 rounded-md bg-primary/20 items-center justify-center text-sm text-primary">@i</Flex>
            }
        </Grid>
    </ComponentDemo>

    <ComponentDemo Title="Different Gaps" Code="@_gapCode">
        <Grid Columns="3" RowGap="6" ColGap="2" Class="w-full">
            @for (var i = 1; i <= 9; i++)
            {
                <Flex Class="h-16 rounded-md bg-primary/20 items-center justify-center text-sm text-primary">@i</Flex>
            }
        </Grid>
    </ComponentDemo>

    <ComponentDemo Title="Columns — interactive" Code="@_columnsInteractiveCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Pick a column count to see it applied live.</Lumeo.Text>
            <Flex Gap="2">
                @foreach (var c in new[] { 1, 2, 3, 4, 6 })
                {
                    var cols = c;
                    <Button Size="Button.ButtonSize.Sm"
                            Variant="@(_gridColumns == cols ? Button.ButtonVariant.Default : Button.ButtonVariant.Outline)"
                            OnClick="@(() => _gridColumns = cols)">@cols col@(cols > 1 ? "s" : "")</Button>
                }
            </Flex>
            <Grid Columns="@_gridColumns" Gap="3" Class="w-full">
                @for (var i = 1; i <= 12; i++)
                {
                    <Flex Class="h-12 rounded-md bg-primary/20 items-center justify-center text-sm text-primary">@i</Flex>
                }
            </Grid>
        </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">Grid</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">Columns</td>
                                <td class="p-3 font-mono text-xs text-muted-foreground">int</td>
                                <td class="p-3 font-mono text-xs text-muted-foreground">1</td>
                                <td class="p-3 text-muted-foreground">Number of grid columns. Maps to grid-cols-{value}.</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">Uniform gap between rows and columns. Maps to gap-{value}.</td>
                            </tr>
                            <tr>
                                <td class="p-3 font-mono text-xs text-primary">RowGap</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">Gap between rows only. Maps to gap-y-{value}. Overrides Gap for rows.</td>
                            </tr>
                            <tr>
                                <td class="p-3 font-mono text-xs text-primary">ColGap</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">Gap between columns only. Maps to gap-x-{value}. Overrides Gap for columns.</td>
                            </tr>
                        </tbody>
                    </table>
                </Stack>
            </Stack>
        </Stack>
    </Stack>
</Stack>

@code {
    private int _gridColumns = 3;

    private string _columnsInteractiveCode = @"<Grid Columns=""4"" Gap=""3"">
    @for (var i = 1; i <= 12; i++)
    {
        <div>@i</div>
    }
</Grid>";

    private string _basicCode = @"<Grid Columns=""3"" Gap=""4"">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</Grid>";

    private string _responsiveCode = @"<Grid Columns=""2"" Gap=""4"" Class=""md:grid-cols-4"">
    <div>1</div>
    <div>2</div>
    <!-- ... -->
</Grid>";

    private string _gapCode = @"<Grid Columns=""3"" RowGap=""6"" ColGap=""2"">
    <div>1</div>
    <div>2</div>
    <!-- ... -->
</Grid>";
}
