@page "/components/scroll-area"

<PageTitle>Scroll Area — Lumeo</PageTitle>

<PageHeader Title="Scroll Area" Description="A scrollable container with styled scrollbar." />

<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>Custom scrollbar styling to match your application theme</li>
        <li>Overflow containers for long lists, chat messages, or log output</li>
        <li>Horizontal scrolling galleries or carousels of items</li>
        <li>Any fixed-height or fixed-width region where content may exceed the visible area</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Vertical Scroll" Code="@_defaultCode">
        <Container MaxWidth="xs">
            <ScrollArea Class="h-72 rounded-md border bg-card p-4">
                <Heading Level="4" Size="sm" Weight="medium" Class="mb-4 leading-none">Tags</Heading>
                @foreach (var tag in _tags)
                {
                    <Stack Class="text-sm text-foreground py-2 border-b last:border-0">@tag</Stack>
                }
            </ScrollArea>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Chat Messages" Code="@_chatCode">
        <Container MaxWidth="xs">
            <ScrollArea Class="h-64 rounded-md border bg-card p-4">
                <Stack Gap="3">
                    @foreach (var msg in _messages)
                    {
                        <Stack Class="@($"flex flex-col {(msg.Mine ? "items-end" : "items-start")}")">
                            <Lumeo.Text As="span" Class="text-xs text-muted-foreground mb-1">@msg.Author</Lumeo.Text>
                            <Stack Class="@($"rounded-lg px-3 py-2 text-sm max-w-[200px] {(msg.Mine ? "bg-primary text-primary-foreground" : "bg-muted text-foreground")}")">
                                @msg.Text
                            </Stack>
                        </Stack>
                    }
                </Stack>
            </ScrollArea>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Horizontal Scroll" Code="@_horizontalCode">
        <ScrollArea Class="w-full max-w-lg whitespace-nowrap rounded-md border bg-card p-4">
            <Flex Class="gap-4">
                @for (var i = 1; i <= 12; i++)
                {
                    <Flex Class="flex-shrink-0 w-32 h-20 rounded-md bg-muted items-center justify-center text-sm text-muted-foreground">
                        Item @i
                    </Flex>
                }
            </Flex>
        </ScrollArea>
    </ComponentDemo>
</Stack>

<div class="mt-16">
    <Heading Id="api-reference" Level="2" Class="scroll-mt-20">API Reference</Heading>

    <Heading Id="scrollarea" Level="3" Class="mt-8 scroll-mt-20">ScrollArea</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Scrollable content.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes. Set height/width constraints here (e.g. "h-72 w-48").</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>
</div>

<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/resizable" class="text-primary hover:underline">Resizable</a> — Resizable panel layouts that often contain scroll areas</li>
        <li><a href="/components/card" class="text-primary hover:underline">Card</a> — Contained content cards that can include scrollable regions</li>
    </ul>
</div>

@code {
    private readonly string[] _tags =
    [
        "Blazor", "ASP.NET Core", "C#", "Tailwind CSS", "ECharts",
        "SignalR", "Entity Framework", "gRPC", "Minimal APIs",
        "MudBlazor", "Radzen", "FluentUI", "Lumeo", "MAUI",
        ".NET 10", "WebAssembly", "Server-side", "Auto render"
    ];

    private record ChatMsg(string Author, string Text, bool Mine);
    private readonly List<ChatMsg> _messages = new()
    {
        new("Alice", "Hey, did you review the PR?", false),
        new("You", "Yes! Left some comments.", true),
        new("Alice", "Thanks. I'll address them now.", false),
        new("You", "No rush, take your time.", true),
        new("Alice", "Done. Can you re-review?", false),
        new("You", "On it!", true),
        new("Alice", "Appreciate it, thanks!", false),
    };

    private string _chatCode = @"<ScrollArea Class=""h-64 rounded-md border p-4"">
    <div class=""space-y-3"">
        @foreach (var msg in _messages)
        {
            <div class=""@($""flex flex-col {(msg.Mine ? ""items-end"" : ""items-start"")}"")>
                <div class=""@($""rounded-lg px-3 py-2 text-sm {(msg.Mine ? ""bg-primary text-primary-foreground"" : ""bg-muted text-foreground"")}"")>
                    @msg.Text
                </div>
            </div>
        }
    </div>
</ScrollArea>";

    private string _defaultCode = @"<ScrollArea Class=""h-72 rounded-md border p-4"">
    <h4 class=""mb-4 text-sm font-medium leading-none"">Tags</h4>
    @foreach (var tag in _tags)
    {
        <div class=""text-sm py-2 border-b"">@tag</div>
    }
</ScrollArea>";

    private string _horizontalCode = @"<ScrollArea Class=""w-full whitespace-nowrap rounded-md border p-4"">
    <div class=""flex gap-4"">
        @for (var i = 1; i <= 12; i++)
        {
            <div class=""flex-shrink-0 w-32 h-20 rounded-md bg-muted flex items-center justify-center"">
                Item @i
            </div>
        }
    </div>
</ScrollArea>";
}
