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

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

<DocsSection Title="Usage">
    <p>
        The icon component allows you to easily integrate SVG or
        font icons into your application to enhance the UI.
    </p>
    <Usage />

    <DocsSection Title="Colors">
        <p>
            Change the color of the icon to match your
            application’s theme or to highlight specific icons.
        </p>
        <Colors />
    </DocsSection>

    <DocsSection Title="Dimensions">
        <p>
            You can customize the icon’s size to fit different layouts or design needs. 
            If the icon is an SVG, the dimensions are applied to the <Code>width</Code> and <Code>height</Code> attributes.
        </p>
        <DimensionsSvg />

        <p>For font icons, the size corresponds to the font size in pixels.</p>
        <DimensionsFont />
    </DocsSection>
</DocsSection>

<DocsSection Title="Custom Styles">
    <p>
        You can customize the icon 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("Colors"),
            new("Dimensions"),
        ]),
        new("Custom Styles"),
        new("API")
    };

    private readonly string[] _apiComponents = new string[]
    {
        nameof(LumexIcon)
    };

    protected override void OnInitialized()
    {
        Layout.Initialize(
            title: "Icon",
            category: "Components",
            description: "Icons provide visual cues, enhancing interfaces with scalable, customizable symbols.",
            headings: _headings,
            linksProps: new ComponentLinksProps( "Icon", isServer: true )
        );
    }
}
