@page "/components/descriptions"

<PageTitle>Descriptions — Lumeo</PageTitle>

<PageHeader Title="Descriptions" Description="A key-value pair list for displaying structured metadata." />

<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>Detail views showing entity information like user profiles or order summaries</li>
        <li>Product specifications with labeled attribute-value pairs</li>
        <li>Key-value data display for settings, configuration, or metadata</li>
        <li>Read-only data presentation where a full table is not needed</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Basic" Code="@_codeBasic">
        <Descriptions Title="User Details" Column="2" Class="max-w-lg">
            <DescriptionsItem Label="Name">John Doe</DescriptionsItem>
            <DescriptionsItem Label="Email">john@example.com</DescriptionsItem>
            <DescriptionsItem Label="Role">Administrator</DescriptionsItem>
            <DescriptionsItem Label="Status">Active</DescriptionsItem>
        </Descriptions>
    </ComponentDemo>

    <ComponentDemo Title="Bordered" Code="@_codeBordered">
        <Descriptions Title="Order Details" Bordered="true" Column="3" Class="max-w-2xl">
            <DescriptionsItem Label="Order ID">#2024-0127</DescriptionsItem>
            <DescriptionsItem Label="Date">Jan 27, 2025</DescriptionsItem>
            <DescriptionsItem Label="Status">Shipped</DescriptionsItem>
            <DescriptionsItem Label="Amount">$249.00</DescriptionsItem>
            <DescriptionsItem Label="Payment">Visa ***4242</DescriptionsItem>
            <DescriptionsItem Label="Tracking">1Z999AA10123456784</DescriptionsItem>
        </Descriptions>
    </ComponentDemo>

    <ComponentDemo Title="Single Column" Code="@_codeSingle">
        <Descriptions Column="1" Class="max-w-sm">
            <DescriptionsItem Label="Product">Lumeo Pro License</DescriptionsItem>
            <DescriptionsItem Label="Price">$99/year</DescriptionsItem>
            <DescriptionsItem Label="License Key">XXXX-XXXX-XXXX-XXXX</DescriptionsItem>
        </Descriptions>
    </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">Descriptions</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">Title</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">Heading above the descriptions grid.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Bordered</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">Display with borders and dividers.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Column</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">3</td><td class="p-3 text-muted-foreground">Number of columns (1-4).</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">DescriptionsItem children.</td></tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>
        <Stack>
            <Heading Level="3" Class="mb-3">DescriptionsItem</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">Label</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">Key label text.</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">Value content.</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.</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/table" class="text-primary hover:underline">Table</a> — Display tabular data with rows and columns for larger datasets</li>
        <li><a href="/components/card" class="text-primary hover:underline">Card</a> — Wrap descriptions in a card for visual grouping</li>
    </ul>
</div>

@code {
    private string _codeBasic = @"<Descriptions Title=""User Details"" Column=""2"">
    <DescriptionsItem Label=""Name"">John Doe</DescriptionsItem>
    <DescriptionsItem Label=""Email"">john@example.com</DescriptionsItem>
    <DescriptionsItem Label=""Role"">Administrator</DescriptionsItem>
    <DescriptionsItem Label=""Status"">Active</DescriptionsItem>
</Descriptions>";

    private string _codeBordered = @"<Descriptions Title=""Order Details"" Bordered=""true"" Column=""3"">
    <DescriptionsItem Label=""Order ID"">#2024-0127</DescriptionsItem>
    <DescriptionsItem Label=""Date"">Jan 27, 2025</DescriptionsItem>
    <DescriptionsItem Label=""Status"">Shipped</DescriptionsItem>
</Descriptions>";

    private string _codeSingle = @"<Descriptions Column=""1"">
    <DescriptionsItem Label=""Product"">Lumeo Pro License</DescriptionsItem>
    <DescriptionsItem Label=""Price"">$99/year</DescriptionsItem>
</Descriptions>";
}
