@page "/components/marquee"

<PageTitle>Marquee — Lumeo</PageTitle>

<PageHeader Title="Marquee" Description="Infinitely scrolling horizontal band of children." />

<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>Showcase partner logos, testimonials, or feature highlights in a continuous loop.</li>
        <li>Create a live ticker for news headlines, announcements, or metrics.</li>
        <li>Use <code class="text-xs bg-muted px-1 py-0.5 rounded">PauseOnHover</code> to let users read individual items comfortably.</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default (Left Scroll)" Code="@_defaultCode">
        <div class="overflow-hidden">
            <Marquee PauseOnHover="true">
                @foreach (var brand in _brands)
                {
                    <div class="mx-6 flex items-center gap-2 text-sm font-medium text-muted-foreground">
                        <DynamicIcon Name="Box" Class="h-4 w-4 shrink-0" />
                        @brand
                    </div>
                }
            </Marquee>
        </div>
    </ComponentDemo>

    <ComponentDemo Title="Reverse Direction" Code="@_reverseCode">
        <div class="overflow-hidden">
            <Marquee Reverse="true" Speed="Marquee.MarqueeSpeed.Slow">
                @foreach (var tag in _tags)
                {
                    <Badge Class="mx-2">@tag</Badge>
                }
            </Marquee>
        </div>
    </ComponentDemo>

    <ComponentDemo Title="Fast Speed" Code="@_fastCode">
        <div class="overflow-hidden">
            <Marquee Speed="Marquee.MarqueeSpeed.Fast" PauseOnHover="true">
                @foreach (var brand in _brands)
                {
                    <div class="mx-6 text-sm text-muted-foreground font-mono">@brand</div>
                }
            </Marquee>
        </div>
    </ComponentDemo>

    <ComponentDemo Title="Speed (interactive)">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Pick a speed to see the scroll rate change live. Hover the marquee to pause.</Lumeo.Text>
            <Segmented @bind-Value="_marqueeSpeedStr" Options="_marqueeSpeedOptions" />
            <div class="overflow-hidden">
                <Marquee Speed="@_marqueeSpeed" PauseOnHover="true">
                    @foreach (var brand in _brands)
                    {
                        <div class="mx-6 flex items-center gap-2 text-sm font-medium text-muted-foreground">
                            <DynamicIcon Name="Box" Class="h-4 w-4 shrink-0" />
                            @brand
                        </div>
                    }
                </Marquee>
            </div>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Direction (interactive)">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Switch the scroll direction live.</Lumeo.Text>
            <Segmented @bind-Value="_marqueeDirectionStr" Options="_marqueeDirectionOptions" />
            <div class="overflow-hidden">
                <Marquee Direction="@_marqueeDirection">
                    @foreach (var tag in _tags)
                    {
                        <Badge Class="mx-2">@tag</Badge>
                    }
                </Marquee>
            </div>
        </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">Marquee</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">Speed</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">MarqueeSpeed</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Normal</td>
                            <td class="p-3 text-muted-foreground">Scroll speed: <code class="text-xs">Slow</code> (60s), <code class="text-xs">Normal</code> (30s), <code class="text-xs">Fast</code> (12s) animation duration.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Direction</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">MarqueeDirection</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Left</td>
                            <td class="p-3 text-muted-foreground">Initial scroll direction: <code class="text-xs">Left</code> or <code class="text-xs">Right</code>.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Reverse</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">Inverts the Direction. Shorthand for setting <code class="text-xs">Direction="Right"</code>.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">PauseOnHover</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">Pauses the animation while the cursor hovers over the marquee.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Vertical</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">Switches to vertical scroll mode.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ChildContent</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">RenderFragment?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Items to scroll. Duplicated automatically to create the infinite loop effect.</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 root element.</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/carousel" class="text-primary hover:underline">Carousel</a> — Slide-based rotator with manual navigation controls.</li>
        <li><a href="/components/text-reveal" class="text-primary hover:underline">TextReveal</a> — Word-by-word reveal animation on scroll.</li>
    </ul>
</div>

@code {
    private string[] _brands = { "Acme Corp", "Globex", "Initech", "Umbrella", "Stark Industries", "Dunder Mifflin", "Prestige Worldwide" };
    private string[] _tags = { "Blazor", ".NET 10", "Tailwind CSS", "Open Source", "Components", "UI Library", "WASM", "Server-Side" };

    // Interactive state
    private string _marqueeSpeedStr = "Normal";
    private Marquee.MarqueeSpeed _marqueeSpeed => _marqueeSpeedStr switch
    {
        "Slow" => Marquee.MarqueeSpeed.Slow,
        "Fast" => Marquee.MarqueeSpeed.Fast,
        _ => Marquee.MarqueeSpeed.Normal,
    };
    private List<Segmented.SegmentedOption> _marqueeSpeedOptions = new()
    {
        new() { Label = "Slow", Value = "Slow" },
        new() { Label = "Normal", Value = "Normal" },
        new() { Label = "Fast", Value = "Fast" },
    };

    private string _marqueeDirectionStr = "Left";
    private Marquee.MarqueeDirection _marqueeDirection => _marqueeDirectionStr == "Right"
        ? Marquee.MarqueeDirection.Right
        : Marquee.MarqueeDirection.Left;
    private List<Segmented.SegmentedOption> _marqueeDirectionOptions = new()
    {
        new() { Label = "Left", Value = "Left" },
        new() { Label = "Right", Value = "Right" },
    };

    private string _defaultCode = @"<Marquee PauseOnHover=""true"">
    <div class=""mx-6 text-sm font-medium text-muted-foreground"">Acme Corp</div>
    <div class=""mx-6 text-sm font-medium text-muted-foreground"">Globex</div>
    <div class=""mx-6 text-sm font-medium text-muted-foreground"">Initech</div>
    <!-- more items -->
</Marquee>";

    private string _reverseCode = @"<Marquee Reverse=""true"" Speed=""Marquee.MarqueeSpeed.Slow"">
    <Badge Class=""mx-2"">Blazor</Badge>
    <Badge Class=""mx-2"">.NET 10</Badge>
    <Badge Class=""mx-2"">Tailwind CSS</Badge>
</Marquee>";

    private string _fastCode = @"<Marquee Speed=""Marquee.MarqueeSpeed.Fast"" PauseOnHover=""true"">
    <div class=""mx-6 text-sm font-mono text-muted-foreground"">Item 1</div>
    <div class=""mx-6 text-sm font-mono text-muted-foreground"">Item 2</div>
</Marquee>";
}
