@page "/docs/customization/layout"
@layout DocsContentLayout

<DocsSection Title="Overview">
    <p>
        LumexUI’s layout configuration allows you to fine-tune the design of the components.
        You can customize key properties such as typography, border radius, and shadows.
        Additionally, you can define the opacity levels for disabled, focused, hovered, and divider elements,
        providing you with full control over your application's layout and visual consistency.
    </p>

    <Callout Variant="@CalloutVariant.Info">
        Typography and shadows were specifically defined for the customization of
        components and may differ from the default settings provided by Tailwind CSS for similar configurations.
    </Callout>
</DocsSection>

<DocsSection Title="Default Configuration">
    <p>Below are the default layout configuration settings.</p>

    <DocsSection Title="Font Size">
        <Preview>
            <div class="grid gap-8">
                <div>
                    <span class="font-medium text-sm text-foreground-500 font-mono mb-3">text-tiny</span>
                    <p class="text-tiny font-medium text-foreground-900">How vexingly quick daft zebras jump!</p>
                </div>
                <div>
                    <span class="font-medium text-sm text-foreground-500 font-mono mb-3">text-small</span>
                    <p class="text-small font-medium text-foreground-900">How vexingly quick daft zebras jump!</p>
                </div>
                <div>
                    <span class="font-medium text-sm text-foreground-500 font-mono mb-3">text-medium</span>
                    <p class="text-medium font-medium text-foreground-900">How vexingly quick daft zebras jump!</p>
                </div>
                <div>
                    <span class="font-medium text-sm text-foreground-500 font-mono mb-3">text-large</span>
                    <p class="text-large font-medium text-foreground-900">How vexingly quick daft zebras jump!</p>
                </div>
            </div>
        </Preview>
        <CodeSnippet Code="@(new CodeBlock(name: null, snippet: "layoutConfigFontSizeExample"))" />
        <CodeSnippet Code="@(new CodeBlock(name: "LayoutConfig.cs", snippet: "layoutConfigFontSize"))" />
    </DocsSection>

    <DocsSection Title="Line Height">
        <Preview>
            <div class="grid gap-8">
                <div>
                    <span class="font-medium text-sm text-foreground-500 font-mono mb-3">leading-tiny</span>
                    <p class="leading-tiny text-foreground-900">@DummyText</p>
                </div>
                <div>
                    <span class="font-medium text-sm text-foreground-500 font-mono mb-3">leading-small</span>
                    <p class="leading-small text-foreground-900">@DummyText</p>
                </div>
                <div>
                    <span class="font-medium text-sm text-foreground-500 font-mono mb-3">leading-medium</span>
                    <p class="leading-medium text-foreground-900">@DummyText</p>
                </div>
                <div>
                    <span class="font-medium text-sm text-foreground-500 font-mono mb-3">leading-large</span>
                    <p class="leading-large text-foreground-900">@DummyText</p>
                </div>
            </div>
        </Preview>
        <CodeSnippet Code="@(new CodeBlock(name: null, snippet: "layoutConfigLineHeightExample"))" />
        <CodeSnippet Code="@(new CodeBlock(name: "LayoutConfig.cs", snippet: "layoutConfigLineHeight"))" />
    </DocsSection>

    <DocsSection Title="Border Radius">
        <Preview>
            <div class="w-full flex flex-col items-center justify-around sm:flex-row">
                <div class="flex flex-col items-center shrink-0">
                    <p class="font-medium text-sm text-foreground-500 font-mono mb-3">rounded-small</p>
                    <div class="border-t-2 border-r-2 border-indigo-500 bg-indigo-50 w-16 h-8 rounded-tr-small"></div>
                </div>
                <div class="flex flex-col items-center shrink-0">
                    <p class="font-medium text-sm text-foreground-500 font-mono mb-3">rounded-medium</p>
                    <div class="border-t-2 border-r-2 border-indigo-500 bg-indigo-50 w-16 h-8 rounded-tr-medium"></div>
                </div>
                <div class="flex flex-col items-center shrink-0">
                    <p class="font-medium text-sm text-foreground-500 font-mono mb-3">rounded-large</p>
                    <div class="border-t-2 border-r-2 border-indigo-500 bg-indigo-50 w-16 h-8 rounded-tr-large"></div>
                </div>
            </div>
        </Preview>
        <CodeSnippet Code="@(new CodeBlock(name: null, snippet: "layoutConfigRadiusExample"))" />
        <CodeSnippet Code="@(new CodeBlock(name: "LayoutConfig.cs", snippet: "layoutConfigRadius"))" />
    </DocsSection>

    <DocsSection Title="Box Shadow">
        <Preview>
            <div class="w-full flex flex-col items-center justify-around sm:flex-row">
                <div class="flex flex-col items-center shrink-0">
                    <p class="font-medium text-sm text-foreground-500 font-mono mb-3">shadow-small</p>
                    <div class="w-20 h-20 rounded-lg bg-white shadow-small"></div>
                </div>
                <div class="flex flex-col items-center shrink-0">
                    <p class="font-medium text-sm text-foreground-500 font-mono mb-3">shadow-medium</p>
                    <div class="w-20 h-20 rounded-lg bg-white shadow-medium"></div>
                </div>
                <div class="flex flex-col items-center shrink-0">
                    <p class="font-medium text-sm text-foreground-500 font-mono mb-3">shadow-large</p>
                    <div class="w-20 h-20 rounded-lg bg-white shadow-large"></div>
                </div>
            </div>
        </Preview>
        <CodeSnippet Code="@(new CodeBlock(name: null, snippet: "layoutConfigShadowExample"))" />
        <CodeSnippet Code="@(new CodeBlock(name: "LayoutConfig.cs", snippet: "layoutConfigShadow"))" />
    </DocsSection>

    <DocsSection Title="Opacity">
        <Preview>
            <div class="w-full flex flex-col items-center justify-around sm:flex-row">
                <div class="flex flex-col items-center shrink-0">
                    <p class="font-medium text-sm text-foreground-500 font-mono mb-3">hover</p>
                    <div class="relative w-16 h-16 flex items-center justify-center rounded-lg overflow-hidden">
                        <div class="w-full h-full bg-primary"></div>
                        <div class="w-full h-full bg-primary opacity-hover"></div>
                        <span class="absolute font-medium font-mono text-white">
                            @_theme.Light.Layout.HoverOpacity
                        </span>
                    </div>
                </div>
                <div class="flex flex-col items-center shrink-0">
                    <p class="font-medium text-sm text-foreground-500 font-mono mb-3">focus</p>
                    <div class="relative w-16 h-16 flex items-center justify-center rounded-lg overflow-hidden">
                        <div class="w-full h-full bg-primary"></div>
                        <div class="w-full h-full bg-primary opacity-focus"></div>
                        <span class="absolute font-medium font-mono text-white">
                            @_theme.Light.Layout.FocusOpacity
                        </span>
                    </div>
                </div>
                <div class="flex flex-col items-center shrink-0">
                    <p class="font-medium text-sm text-foreground-500 font-mono mb-3">disabled</p>
                    <div class="relative w-16 h-16 flex items-center justify-center rounded-lg overflow-hidden">
                        <div class="w-full h-full bg-primary"></div>
                        <div class="w-full h-full bg-primary opacity-disabled"></div>
                        <span class="absolute font-medium font-mono text-white">
                            @_theme.Light.Layout.DisabledOpacity
                        </span>
                    </div>
                </div>
                <div class="flex flex-col items-center shrink-0">
                    <p class="font-medium text-sm text-foreground-500 font-mono mb-3">divider</p>
                    <div class="relative w-16 h-16 flex items-center justify-center rounded-lg overflow-hidden">
                        <div class="w-full h-full bg-primary"></div>
                        <div class="w-full h-full bg-primary opacity-divider"></div>
                        <span class="absolute font-medium font-mono text-white">
                            @_theme.Light.Layout.DividerOpacity
                        </span>
                    </div>
                </div>
            </div>
        </Preview>
        <CodeSnippet Code="@(new CodeBlock(name: null, snippet: "layoutConfigOpacityExample"))" />
        <CodeSnippet Code="@(new CodeBlock(name: "LayoutConfig.cs", snippet: "layoutConfigOpacity"))" />
    </DocsSection>

    <DocsSection Title="Full">
        <CodeSnippet Code="@(new CodeBlock(name: "LayoutConfig.cs", snippet: "layoutConfigFull"))" />
    </DocsSection>
</DocsSection>

<DocsSection Title="Types">
    <DocsSection Title="BaseScale">
        <CodeSnippet Code="@(new CodeBlock(name: null, snippet: "layoutTypesBaseScale"))" />
    </DocsSection>

    <DocsSection Title="FontScale">
        <CodeSnippet Code="@(new CodeBlock(name: null, snippet: "layoutTypesFontScale"))" />
    </DocsSection>
</DocsSection>

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

    private const string DummyText = "Jake thought he was making a smoothie, but halfway through blending, he realized he had added his dog's kibble instead of chia seeds. Determined not to waste food, he took a sip, only to find his dog staring at him in confusion. Now, every morning, they share breakfast—Jake with kibble, and the dog with chia seeds.";

    private readonly DocsTheme _theme = new();
    private readonly Heading[] _headings = new Heading[]
    {
        new("Overview"),
        new("Default Configuration", [
            new("Font Size"),
            new("Line Height"),
            new("Border Radius"),
            new("Box Shadow"),
            new("Opacity"),
            new("Full"),
        ]),
        new("Types", [
            new("BaseScale"),
            new("FontScale")
        ])
    };

    protected override void OnInitialized()
    {
        Layout.Initialize(
            title: "Layout",
            category: "Customization",
            description: "Layout configuration simplifies managing and customizing key interface aspects like typography, shadows and more.",
            _headings
        );
    }
}
