@page "/components/heading"

<PageTitle>Heading — Lumeo</PageTitle>

<PageHeader Title="Heading" Description="A semantic heading component that renders h1-h6 elements with sensible default sizes and weights." />

<Stack Gap="8">
    <ComponentDemo Title="All Levels" Code="@_levelsCode">
        <Stack Gap="3" Class="w-full">
            <Heading Level="1">Heading Level 1</Heading>
            <Heading Level="2">Heading Level 2</Heading>
            <Heading Level="3">Heading Level 3</Heading>
            <Heading Level="4">Heading Level 4</Heading>
            <Heading Level="5">Heading Level 5</Heading>
            <Heading Level="6">Heading Level 6</Heading>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Custom Sizes" Code="@_customCode">
        <Stack Gap="3">
            <Heading Level="2" Size="sm">h2 with small text</Heading>
            <Heading Level="3" Size="3xl">h3 with 3xl text</Heading>
            <Heading Level="4" Size="lg" Weight="normal">h4 with lg text, normal weight</Heading>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Tracking" Code="@_trackingCode">
        <Stack Gap="3">
            <Heading Level="1">Default tight tracking (h1)</Heading>
            <Heading Level="1" Tracking="normal">Normal tracking</Heading>
            <Heading Level="1" Tracking="wide">Wide tracking</Heading>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Level — interactive" Code="@_levelInteractiveCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Pick a heading level to see it applied live.</Lumeo.Text>
            <Flex Gap="2" Wrap="true">
                @for (var l = 1; l <= 6; l++)
                {
                    var level = l;
                    <Button Size="Button.ButtonSize.Sm"
                            Variant="@(_headingLevel == level ? Button.ButtonVariant.Default : Button.ButtonVariant.Outline)"
                            OnClick="@(() => _headingLevel = level)">H@level</Button>
                }
            </Flex>
            <Heading Level="@_headingLevel">This is a level @_headingLevel heading</Heading>
        </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">Heading</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">Level</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">2</td>
                                <td class="p-3 text-muted-foreground">Heading level (1–6). Determines the HTML element (h1–h6) and default size, weight, and tracking.</td>
                            </tr>
                            <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">auto</td>
                                <td class="p-3 text-muted-foreground">Override the default text size. Maps to text-{value}. Defaults: h1=4xl, h2=3xl, h3=2xl, h4=xl, h5=lg, h6=base.</td>
                            </tr>
                            <tr>
                                <td class="p-3 font-mono text-xs text-primary">Weight</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">auto</td>
                                <td class="p-3 text-muted-foreground">Override the default font weight. Defaults: h1/h2=bold, h3/h4=semibold, h5/h6=medium.</td>
                            </tr>
                            <tr>
                                <td class="p-3 font-mono text-xs text-primary">Tracking</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">auto</td>
                                <td class="p-3 text-muted-foreground">Letter spacing override. Maps to tracking-{value}. Defaults to "tight" for h1/h2.</td>
                            </tr>
                        </tbody>
                    </table>
                </Stack>
            </Stack>
        </Stack>
    </Stack>
</Stack>

@code {
    private int _headingLevel = 2;

    private string _levelInteractiveCode = @"<Heading Level=""2"">This is a level 2 heading</Heading>";

    private string _levelsCode = @"<Heading Level=""1"">Heading Level 1</Heading>
<Heading Level=""2"">Heading Level 2</Heading>
<Heading Level=""3"">Heading Level 3</Heading>
<Heading Level=""4"">Heading Level 4</Heading>
<Heading Level=""5"">Heading Level 5</Heading>
<Heading Level=""6"">Heading Level 6</Heading>";

    private string _customCode = @"<Heading Level=""2"" Size=""sm"">h2 with small text</Heading>
<Heading Level=""3"" Size=""3xl"">h3 with 3xl text</Heading>
<Heading Level=""4"" Size=""lg"" Weight=""normal"">h4 with lg text, normal weight</Heading>";

    private string _trackingCode = @"<Heading Level=""1"">Default tight tracking</Heading>
<Heading Level=""1"" Tracking=""normal"">Normal tracking</Heading>
<Heading Level=""1"" Tracking=""wide"">Wide tracking</Heading>";
}
