@page "/components/link"

<PageTitle>Link â€” Lumeo</PageTitle>

<PageHeader Title="Link" Description="A styled anchor component with variant support and external link handling." />

<Stack Gap="8">
    <ComponentDemo Title="Default" Code="@_defaultCode">
        <Lumeo.Link Href="#">Default link style</Lumeo.Link>
    </ComponentDemo>

    <ComponentDemo Title="Variants" Code="@_variantsCode">
        <Flex Gap="6" Align="center">
            <Lumeo.Link Href="#" Variant="default">Default</Lumeo.Link>
            <Lumeo.Link Href="#" Variant="muted">Muted</Lumeo.Link>
            <Lumeo.Link Href="#" Variant="underline">Underline</Lumeo.Link>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="External Link" Code="@_externalCode">
        <Lumeo.Link Href="https://github.com" External="true">
            Visit GitHub
            <DynamicIcon Name="ExternalLink" Class="h-3 w-3 ml-1 inline" />
        </Lumeo.Link>
    </ComponentDemo>

    <ComponentDemo Title="With Size" Code="@_sizeCode">
        <Stack Gap="2">
            <Lumeo.Link Href="#" Size="xs">Extra small link</Lumeo.Link>
            <Lumeo.Link Href="#" Size="sm">Small link</Lumeo.Link>
            <Lumeo.Link Href="#">Default size link</Lumeo.Link>
            <Lumeo.Link Href="#" Size="lg">Large link</Lumeo.Link>
        </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[] { "default", "muted", "underline" })
                {
                    var variant = v;
                    <Button Size="Button.ButtonSize.Sm"
                            Variant="@(_linkVariant == variant ? Button.ButtonVariant.Default : Button.ButtonVariant.Outline)"
                            OnClick="@(() => _linkVariant = variant)">@variant</Button>
                }
            </Flex>
            <Lumeo.Link Href="#" Variant="@_linkVariant">This is a "@_linkVariant" link — hover me</Lumeo.Link>
        </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">Link</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">Href</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">The URL the anchor links to.</td>
                            </tr>
                            <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">"default"</td>
                                <td class="p-3 text-muted-foreground">Visual style. Values: "default" (primary color, hover underline), "muted" (muted color), "underline" (always underlined).</td>
                            </tr>
                            <tr>
                                <td class="p-3 font-mono text-xs text-primary">External</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">Opens the link in a new tab with target="_blank" and rel="noopener noreferrer".</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">â€”</td>
                                <td class="p-3 text-muted-foreground">Text size. Maps to text-{value} (e.g. "xs", "sm", "lg").</td>
                            </tr>
                        </tbody>
                    </table>
                </Stack>
            </Stack>
        </Stack>
    </Stack>
</Stack>

@code {
    private string _linkVariant = "default";

    private string _variantInteractiveCode = @"<Lumeo.Link Href=""#"" Variant=""underline"">This is an underline link</Lumeo.Link>";

    private string _defaultCode = @"<Link Href=""#"">Default link style</a>";

    private string _variantsCode = @"<Link Href=""#"" Variant=""default"">Default</a>
<Link Href=""#"" Variant=""muted"">Muted</a>
<Link Href=""#"" Variant=""underline"">Underline</a>";

    private string _externalCode = @"<Link Href=""https://github.com"" External=""true"">
    Visit GitHub
</a>";

    private string _sizeCode = @"<Link Href=""#"" Size=""xs"">Extra small</a>
<Link Href=""#"" Size=""sm"">Small</a>
<Link Href=""#"">Default</a>
<Link Href=""#"" Size=""lg"">Large</a>";
}
