@page "/components/code"

<PageTitle>Code — Lumeo</PageTitle>

<PageHeader Title="Code" Description="Inline or block monospace code snippet with optional copy button." />

<div class="mt-10 space-y-3">
    <Heading Id="when-to-use" Level="2" Class="scroll-mt-20">When to Use</Heading>
    <ul class="list-disc list-inside space-y-1 text-muted-foreground text-sm">
        <li>Render short inline code references inside prose text.</li>
        <li>Display multi-line code blocks with monospace styling and horizontal scroll.</li>
        <li>Highlight file paths, variable names, or terminal commands in documentation.</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Inline" Code="@_inlineCode">
        <p class="text-sm text-foreground">
            Use the <Code>@nameof(Code)</Code> component to style inline code.
            Pass <Code>Variant="block"</Code> for multi-line blocks.
        </p>
    </ComponentDemo>

    <ComponentDemo Title="Block" Code="@_blockCode">
        <Code Variant="block">dotnet add package Lumeo --version 2.2.2</Code>
    </ComponentDemo>

    <ComponentDemo Title="Custom Size" Code="@_sizeCode">
        <Stack Gap="2">
            <Code Size="xs">text-xs code</Code>
            <Code Size="base">text-base code</Code>
            <Code Size="lg">text-lg code</Code>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Variant — interactive" Code="@_variantInteractiveCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Pick a variant to see it applied live.</Lumeo.Text>
            <Flex Gap="2">
                @foreach (var v in new[] { "inline", "block" })
                {
                    var variant = v;
                    <Button Size="Button.ButtonSize.Sm"
                            Variant="@(_codeVariant == variant ? Button.ButtonVariant.Default : Button.ButtonVariant.Outline)"
                            OnClick="@(() => _codeVariant = variant)">@variant</Button>
                }
            </Flex>
            <Code Variant="@_codeVariant">dotnet add package Lumeo</Code>
        </Stack>
    </ComponentDemo>
</Stack>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</Heading>

    <Stack Gap="8" Class="mt-8">
        <Stack>
            <Heading Level="3" Class="mb-3">Code</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">Variant</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">"inline"</td>
                            <td class="p-3 text-muted-foreground">Render style. <code class="text-xs">inline</code> renders as a pill; <code class="text-xs">block</code> renders as a full-width scrollable block.</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">null</td>
                            <td class="p-3 text-muted-foreground">Tailwind text-size suffix (e.g. <code class="text-xs">xs</code>, <code class="text-xs">sm</code>, <code class="text-xs">base</code>, <code class="text-xs">lg</code>). Overrides the component default font size.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ChildContent</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">RenderFragment?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">The code content to display.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Class</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">null</td>
                            <td class="p-3 text-muted-foreground">Additional CSS classes merged onto the root element.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>
    </Stack>
</Stack>

<div class="mt-12">
    <Heading Id="related" Level="2" Class="scroll-mt-20">Related Components</Heading>
    <ul class="mt-4 space-y-2 text-sm">
        <li><a href="/components/text" class="text-primary hover:underline">Text</a> — Paragraph text with size, color, and weight props.</li>
        <li><a href="/components/heading" class="text-primary hover:underline">Heading</a> — Semantic h1–h6 with Lumeo typographic scale.</li>
    </ul>
</div>

@code {
    private string _codeVariant = "inline";

    private string _variantInteractiveCode = @"@* inline — pill-styled within text *@
<Code Variant=""inline"">dotnet add package Lumeo</Code>

@* block — full-width scrollable code block *@
<Code Variant=""block"">dotnet add package Lumeo</Code>";

    private string _inlineCode = @"<p>
    Use the <Code>Code</Code> component to style inline code.
    Pass <Code>Variant=""block""</Code> for multi-line blocks.
</p>";

    private string _blockCode = @"<Code Variant=""block"">dotnet add package Lumeo --version 2.2.2</Code>";

    private string _sizeCode = @"<Code Size=""xs"">text-xs code</Code>
<Code Size=""base"">text-base code</Code>
<Code Size=""lg"">text-lg code</Code>";
}
