@page "/components/container"

<PageTitle>Container — Lumeo</PageTitle>

<PageHeader Title="Container" Description="A responsive container that constrains content width and centers it on the page." />

<Stack Gap="8">
    <ComponentDemo Title="Centered Content" Code="@_basicCode">
        <Stack Class="w-full">
            <Container MaxWidth="md" Class="border border-dashed border-border rounded-lg py-6">
                <Lumeo.Text Color="muted" Align="center">Content centered within max-w-md</Lumeo.Text>
            </Container>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Different Max Widths" Code="@_widthsCode">
        <Stack Gap="4" Class="w-full">
            <Container MaxWidth="sm" Class="border border-dashed border-border rounded-lg py-3">
                <Lumeo.Text Size="sm" Color="muted" Align="center">max-w-sm</Lumeo.Text>
            </Container>
            <Container MaxWidth="md" Class="border border-dashed border-border rounded-lg py-3">
                <Lumeo.Text Size="sm" Color="muted" Align="center">max-w-md</Lumeo.Text>
            </Container>
            <Container MaxWidth="lg" Class="border border-dashed border-border rounded-lg py-3">
                <Lumeo.Text Size="sm" Color="muted" Align="center">max-w-lg</Lumeo.Text>
            </Container>
            <Container MaxWidth="xl" Class="border border-dashed border-border rounded-lg py-3">
                <Lumeo.Text Size="sm" Color="muted" Align="center">max-w-xl</Lumeo.Text>
            </Container>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="MaxWidth — interactive" Code="@_maxWidthInteractiveCode">
        <Stack Gap="4" Class="w-full">
            <Lumeo.Text Size="sm" Color="muted">Pick a max-width to see it applied live.</Lumeo.Text>
            <Flex Wrap="true" Gap="2">
                @foreach (var w in new[] { "xs", "sm", "md", "lg", "xl", "2xl", "full" })
                {
                    var width = w;
                    <Button Size="Button.ButtonSize.Sm"
                            Variant="@(_containerMaxWidth == width ? Button.ButtonVariant.Default : Button.ButtonVariant.Outline)"
                            OnClick="@(() => _containerMaxWidth = width)">@width</Button>
                }
            </Flex>
            <Container MaxWidth="@_containerMaxWidth" Center="true" Class="border border-dashed border-border rounded-lg py-4">
                <Lumeo.Text Color="muted" Align="center">max-w-@_containerMaxWidth</Lumeo.Text>
            </Container>
        </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">Container</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">MaxWidth</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">"lg"</td>
                                <td class="p-3 text-muted-foreground">Maximum width. Maps to max-w-{value} (e.g. "sm", "md", "lg", "xl", "2xl").</td>
                            </tr>
                            <tr>
                                <td class="p-3 font-mono text-xs text-primary">Center</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">true</td>
                                <td class="p-3 text-muted-foreground">Whether to horizontally center the container using mx-auto.</td>
                            </tr>
                            <tr>
                                <td class="p-3 font-mono text-xs text-primary">Padding</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">Horizontal padding applied via px-{value}.</td>
                            </tr>
                        </tbody>
                    </table>
                </Stack>
            </Stack>
        </Stack>
    </Stack>
</Stack>

@code {
    private string _containerMaxWidth = "md";

    private string _maxWidthInteractiveCode = @"<Container MaxWidth=""lg"">
    Content constrained to max-w-lg
</Container>";

    private string _basicCode = @"<Container MaxWidth=""md"">
    <p>Content centered within max-w-md</p>
</Container>";

    private string _widthsCode = @"<Container MaxWidth=""sm"">Small container</Container>
<Container MaxWidth=""md"">Medium container</Container>
<Container MaxWidth=""lg"">Large container</Container>
<Container MaxWidth=""xl"">Extra large container</Container>";
}
