@page "/components/label"

<PageTitle>Label — Lumeo</PageTitle>

<PageHeader Title="Label" Description="A text label for form controls." />

<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>Labeling form fields such as inputs, selects, checkboxes, and radio buttons</li>
        <li>Improving accessibility by associating labels with their form controls</li>
        <li>Indicating required fields with visual markers alongside label text</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default" Code="@_defaultCode">
        <Stack Gap="2" Class="w-full max-w-sm">
            <Label>Email address</Label>
            <Input Type="email" Placeholder="you@example.com" />
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Required Field" Code="@_requiredCode">
        <Stack Gap="4" Class="w-full max-w-sm">
            <Stack Gap="2">
                <Flex Gap="1" Align="center">
                    <Label>Email address</Label>
                    <Lumeo.Text As="span" Size="sm" Color="destructive">*</Lumeo.Text>
                </Flex>
                <Input type="email" placeholder="you@example.com" />
                <Lumeo.Text Size="xs" Color="muted">We'll never share your email with anyone.</Lumeo.Text>
            </Stack>
            <Stack Gap="2">
                <Flex Align="center" Justify="between">
                    <Label>Password</Label>
                    <Lumeo.Link Href="#" Class="text-xs text-primary hover:underline no-underline">Forgot password?</Lumeo.Link>
                </Flex>
                <Input type="password" placeholder="••••••••" />
            </Stack>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Multiple Fields" Code="@_multipleCode">
        <Stack Gap="4" Class="w-full max-w-sm">
            <Stack Gap="2">
                <Label>First name</Label>
                <Input Placeholder="John" />
            </Stack>
            <Stack Gap="2">
                <Label>Last name</Label>
                <Input Placeholder="Doe" />
            </Stack>
            <Flex Gap="2" Align="center">
                <Checkbox @bind-Checked="_agreed" />
                <Label>I agree to the terms and conditions</Label>
            </Flex>
        </Stack>
    </ComponentDemo>
</Stack>

<div class="mt-16">
    <Heading Id="api-reference" Level="2" Class="scroll-mt-20">API Reference</Heading>

    <Heading Id="label" Level="3" Class="mt-8 scroll-mt-20">Label</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>The label text content.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">For</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>The id of the form element the label is associated with.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>
</div>

<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/input" class="text-primary hover:underline">Input</a> — For text input fields that labels are commonly paired with</li>
        <li><a href="/components/form" class="text-primary hover:underline">Form</a> — For structured form layouts with built-in label and validation support</li>
        <li><a href="/components/checkbox" class="text-primary hover:underline">Checkbox</a> — For boolean controls that benefit from inline labels</li>
    </ul>
</div>

@code {
    private bool _agreed;

    private string _defaultCode = @"<Label>Email address</Label>
<Input Type=""email"" Placeholder=""you@example.com"" />";

    private string _requiredCode = @"<Stack Gap=""2"">
    <Flex Gap=""1"" Align=""center"">
        <Label>Email address</Label>
        <Lumeo.Text As=""span"" Size=""sm"" Color=""destructive"">*</Lumeo.Text>
    </Flex>
    <Input type=""email"" placeholder=""you@example.com"" />
    <Lumeo.Text Size=""xs"" Color=""muted"">We'll never share your email.</Lumeo.Text>
</Stack>
<Stack Gap=""2"">
    <Flex Align=""center"" Justify=""between"">
        <Label>Password</Label>
        <a href=""#"" class=""text-xs text-primary hover:underline"">Forgot password?</a>
    </Flex>
    <Input type=""password"" placeholder=""••••••••"" />
</Stack>";

    private string _multipleCode = @"<Stack Gap=""2"">
    <Label>First name</Label>
    <Input Placeholder=""John"" />
</Stack>
<Flex Gap=""2"" Align=""center"">
    <Checkbox @bind-Checked=""_agreed"" />
    <Label>I agree to the terms and conditions</Label>
</Flex>";
}
