@page "/docs/components/link"
@layout DocsContentLayout

@using LumexUI.Docs.Client.Pages.Components.Link.PreviewCodes

<DocsSection Title="Usage">
    <p>The link component is used to navigate users to other pages or external resources.</p>
    <Usage />

    <DocsSection Title="Disabled">
        <p>
            You can disable a link to prevent user interaction.
            A disabled link is faded and does not respond to user clicks.
        </p>
        <Disabled />
    </DocsSection>

    <DocsSection Title="Colors">
        <p>
            Customize the appearance of the link by applying
            different colors that suit your application's theme and design.
        </p>
        <Colors />
    </DocsSection>

    <DocsSection Title="Underline">
        <p>You can control whether the link has an underline for emphasis or a cleaner look.</p>
        <Underline />
    </DocsSection>

    <DocsSection Title="External">
        <p>
            The link component can be configured for external URLs,
            ensuring it opens in a new tab and behaves accordingly.
        </p>
        <External />
    </DocsSection>

    <DocsSection Title="Polymorphic">
        <p>
            LumexUI components expose an <Code>As</Code> parameter that allows you to
            customize the HTML element tag used to render the component.
        </p>
        <Polymorphic />
        <Callout Variant="@CalloutVariant.Warning" Classes="@(new() { Base = "[&_code]:font-semibold [&_code]:text-sm" })">
            The above is an attempt to replicate the polymorphic components from React. 
            However, in Blazor, we can only control the HTML element tag of the rendered component. 
            For example, to make the button link open in a new tab, 
            you must manually define the <code>`target`</code> and <code>`rel`</code> attributes.
        </Callout>
    </DocsSection>

    <DocsSection Title="Active State">
        <p>
            Just like Blazor native <Code>NavLink</Code> component, this one also
            enables an active CSS class based on whether its <code>href</code> matches the current URL.
            Please refer to the
            <LumexLink Href="https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-8.0#navlink-component"
                       External="@true">
                official documentation
            </LumexLink> for further information.
        </p>
    </DocsSection>
</DocsSection>

<DocsSection Title="Custom Styles">
    <p>
        You can customize the link component by passing any Tailwind CSS
        classes to the component's <Code>Class</Code> and/or <Code>Style</Code> parameters.
    </p>
    <CustomStyles />
</DocsSection>

<DocsApiSection Components="@_apiComponents" />

@code {
    [CascadingParameter] private DocsContentLayout Layout { get; set; } = default!;

    private readonly Heading[] _headings = new Heading[]
    {
        new("Usage", [
            new("Disabled"),
            new("Colors"),
            new("Underline"),
            new("External"),
            new("Polymorphic"),
            new("Active State"),
        ]),
        new("Custom Styles"),
        new("API")
    };

    private readonly string[] _apiComponents = new string[]
    {
        nameof(LumexLink),
        nameof(LumexButton),
    };

    protected override void OnInitialized()
    {
        Layout.Initialize(
            title: "Link",
            category: "Components",
            description: "The link component allows users to click their way from page to page.",
            headings: _headings,
            linksProps: new ComponentLinksProps( "Link", isServer: true )
        );
    }
}
