@page "/components/shimmer-button"

<PageTitle>ShimmerButton — Lumeo</PageTitle>

<PageHeader Title="ShimmerButton" Description="Button with animated shimmer border beam." />

<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>Draw attention to a primary call-to-action in hero sections or landing pages.</li>
        <li>Differentiate a key action from surrounding buttons without heavy color changes.</li>
        <li>Supports all the same variants and sizes as the regular <code class="text-xs bg-muted px-1 py-0.5 rounded">Button</code> component.</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default Shimmer" Code="@_defaultCode">
        <Flex Gap="3" Wrap="true">
            <ShimmerButton>Get Started</ShimmerButton>
            <ShimmerButton Variant="Button.ButtonVariant.Secondary">Learn More</ShimmerButton>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Shimmer Off" Code="@_noShimmerCode">
        <Flex Gap="3" Wrap="true">
            <ShimmerButton Shimmer="false">No Shimmer</ShimmerButton>
            <ShimmerButton Shimmer="true">With Shimmer</ShimmerButton>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Variants" Code="@_variantsCode">
        <Flex Gap="3" Wrap="true">
            <ShimmerButton>Default</ShimmerButton>
            <ShimmerButton Variant="Button.ButtonVariant.Outline">Outline</ShimmerButton>
            <ShimmerButton Variant="Button.ButtonVariant.Secondary">Secondary</ShimmerButton>
            <ShimmerButton Variant="Button.ButtonVariant.Ghost">Ghost</ShimmerButton>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Sizes" Code="@_sizesCode">
        <Flex Gap="3" Wrap="true" Align="center">
            <ShimmerButton Size="Button.ButtonSize.Sm">Small</ShimmerButton>
            <ShimmerButton>Default</ShimmerButton>
            <ShimmerButton Size="Button.ButtonSize.Lg">Large</ShimmerButton>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Custom Shimmer Color" Code="@_colorCode">
        <Flex Gap="3" Wrap="true">
            <ShimmerButton ShimmerColor="rgba(99,102,241,0.6)">Indigo Shimmer</ShimmerButton>
            <ShimmerButton ShimmerColor="rgba(236,72,153,0.6)" Variant="Button.ButtonVariant.Secondary">Pink Shimmer</ShimmerButton>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Variant (interactive)">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Pick a variant to see the shimmer applied to each style live.</Lumeo.Text>
            <Segmented @bind-Value="_shimmerVariantStr" Options="_shimmerVariantOptions" />
            <Flex Gap="3" Wrap="true" Align="center">
                <ShimmerButton Variant="@_shimmerVariant">@_shimmerVariantStr</ShimmerButton>
                <ShimmerButton Variant="@_shimmerVariant" Shimmer="false">No Shimmer</ShimmerButton>
                <ShimmerButton Variant="@_shimmerVariant" Size="Button.ButtonSize.Sm">Small</ShimmerButton>
                <ShimmerButton Variant="@_shimmerVariant" Size="Button.ButtonSize.Lg">Large</ShimmerButton>
            </Flex>
        </Stack>
    </ComponentDemo>
</Stack>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</Heading>

    <Stack Gap="8" Class="mt-8">
        <Stack>
            <Heading Level="3" Class="mb-3">ShimmerButton</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">Shimmer</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">true</td>
                            <td class="p-3 text-muted-foreground">Enables the shimmer sweep animation.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ShimmerColor</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">null</td>
                            <td class="p-3 text-muted-foreground">CSS color value for the shimmer sweep. Defaults to a translucent foreground.</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">Button.ButtonVariant</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Default</td>
                            <td class="p-3 text-muted-foreground">Visual style: Default, Destructive, Outline, Secondary, Ghost, Link.</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">Button.ButtonSize</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Default</td>
                            <td class="p-3 text-muted-foreground">Size: Default, Sm, Lg, Icon.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">PressEffect</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Button.ButtonPressEffect</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">None</td>
                            <td class="p-3 text-muted-foreground">Visual feedback on press: None, Scale, Brightness, Ripple.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Disabled</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">Disables the button.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">OnClick</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;MouseEventArgs&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Click event callback.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Class</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">null</td>
                            <td class="p-3 text-muted-foreground">Additional CSS classes merged onto the button.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>
    </Stack>
</Stack>

<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/button" class="text-primary hover:underline">Button</a> — The base button component without the shimmer animation.</li>
        <li><a href="/components/sparkles" class="text-primary hover:underline">Sparkles</a> — Decorative sparkle particle animation for text or elements.</li>
    </ul>
</div>

@code {
    // Interactive state
    private string _shimmerVariantStr = "Default";
    private Button.ButtonVariant _shimmerVariant => _shimmerVariantStr switch
    {
        "Outline" => Button.ButtonVariant.Outline,
        "Secondary" => Button.ButtonVariant.Secondary,
        "Ghost" => Button.ButtonVariant.Ghost,
        _ => Button.ButtonVariant.Default,
    };
    private List<Segmented.SegmentedOption> _shimmerVariantOptions = new()
    {
        new() { Label = "Default", Value = "Default" },
        new() { Label = "Outline", Value = "Outline" },
        new() { Label = "Secondary", Value = "Secondary" },
        new() { Label = "Ghost", Value = "Ghost" },
    };

    private string _defaultCode = @"<ShimmerButton>Get Started</ShimmerButton>
<ShimmerButton Variant=""Button.ButtonVariant.Secondary"">Learn More</ShimmerButton>";

    private string _noShimmerCode = @"<ShimmerButton Shimmer=""false"">No Shimmer</ShimmerButton>
<ShimmerButton Shimmer=""true"">With Shimmer</ShimmerButton>";

    private string _variantsCode = @"<ShimmerButton>Default</ShimmerButton>
<ShimmerButton Variant=""Button.ButtonVariant.Outline"">Outline</ShimmerButton>
<ShimmerButton Variant=""Button.ButtonVariant.Secondary"">Secondary</ShimmerButton>
<ShimmerButton Variant=""Button.ButtonVariant.Ghost"">Ghost</ShimmerButton>";

    private string _sizesCode = @"<ShimmerButton Size=""Button.ButtonSize.Sm"">Small</ShimmerButton>
<ShimmerButton>Default</ShimmerButton>
<ShimmerButton Size=""Button.ButtonSize.Lg"">Large</ShimmerButton>";

    private string _colorCode = @"<ShimmerButton ShimmerColor=""rgba(99,102,241,0.6)"">Indigo Shimmer</ShimmerButton>
<ShimmerButton ShimmerColor=""rgba(236,72,153,0.6)"" Variant=""Button.ButtonVariant.Secondary"">Pink Shimmer</ShimmerButton>";
}
