@page "/components/center"

<PageTitle>Center — Lumeo</PageTitle>

<PageHeader Title="Center" Description="A utility component that centers its children both horizontally and vertically." />

<Stack Gap="8">
    <ComponentDemo Title="Basic Centering" Code="@_basicCode">
        <Center Class="h-32 w-full rounded-lg border border-dashed border-border">
            <Lumeo.Text Color="muted">Centered content</Lumeo.Text>
        </Center>
    </ComponentDemo>

    <ComponentDemo Title="With Fixed Height" Code="@_heightCode">
        <Center Height="200px" Class="w-full rounded-lg border border-dashed border-border">
            <Stack Align="center" Gap="2">
                <DynamicIcon Name="Image" Class="h-8 w-8 text-muted-foreground" />
                <Lumeo.Text Color="muted" Size="sm">No image selected</Lumeo.Text>
            </Stack>
        </Center>
    </ComponentDemo>

    <ComponentDemo Title="Inline Center" Code="@_inlineCode">
        <Lumeo.Text>
            Click the
            <Center Inline="true" Class="h-6 w-6 rounded bg-primary/20 mx-1">
                <DynamicIcon Name="Plus" Class="h-3 w-3 text-primary" />
            </Center>
            icon to add an item.
        </Lumeo.Text>
    </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">Center</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">Height</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 height as a CSS value (e.g. "200px", "10rem"). When unset, defaults to h-full.</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 centering within text.</td>
                            </tr>
                        </tbody>
                    </table>
                </Stack>
            </Stack>
        </Stack>
    </Stack>
</Stack>

@code {
    private string _basicCode = @"<Center Class=""h-32 w-full"">
    <Text Color=""muted"">Centered content</Text>
</Center>";

    private string _heightCode = @"<Center Height=""200px"">
    <Stack Align=""center"" Gap=""2"">
        <DynamicIcon Name=""Image"" Class=""h-8 w-8 text-muted-foreground"" />
        <Text Color=""muted"" Size=""sm"">No image selected</Text>
    </Stack>
</Center>";

    private string _inlineCode = @"<Text>
    Click the
    <Center Inline=""true"" Class=""h-6 w-6 rounded bg-primary/20 mx-1"">
        <DynamicIcon Name=""Plus"" Class=""h-3 w-3 text-primary"" />
    </Center>
    icon to add an item.
</Text>";
}
