@page "/components/skeleton"

<PageTitle>Skeleton — Lumeo</PageTitle>

<PageHeader Title="Skeleton" Description="Displays a placeholder loading animation while content is being fetched." />

<Stack Gap="8">
    <ComponentDemo Title="Basic Shapes" Code="@_basicCode">
        <Stack Gap="4">
            <Skeleton Class="h-4 w-[250px]" />
            <Skeleton Class="h-4 w-[200px]" />
            <Skeleton Class="h-4 w-[150px]" />
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Card Skeleton" Code="@_cardCode">
        <Container MaxWidth="sm" Center="false" Padding="">
            <Card>
                <CardHeader>
                    <Skeleton Class="h-5 w-[180px]" />
                    <Skeleton Class="h-4 w-[250px]" />
                </CardHeader>
                <CardContent>
                    <Stack Gap="2">
                        <Skeleton Class="h-4 w-full" />
                        <Skeleton Class="h-4 w-full" />
                        <Skeleton Class="h-4 w-[80%]" />
                    </Stack>
                </CardContent>
            </Card>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Profile Skeleton" Code="@_profileCode">
        <Flex Align="center" Gap="4">
            <Skeleton Class="h-12 w-12 rounded-full" />
            <Stack Gap="2">
                <Skeleton Class="h-4 w-[200px]" />
                <Skeleton Class="h-4 w-[160px]" />
            </Stack>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="List Skeleton" Code="@_listCode">
        <Container MaxWidth="md" Center="false" Padding="">
            <Stack Gap="4">
                @for (var i = 0; i < 3; i++)
                {
                    <Flex Align="center" Gap="4">
                        <Skeleton Class="h-10 w-10 rounded-full" />
                        <Stack Gap="2" Class="flex-1">
                            <Skeleton Class="h-4 w-[60%]" />
                            <Skeleton Class="h-3 w-[40%]" />
                        </Stack>
                    </Flex>
                }
            </Stack>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Animation — interactive" Code="@_animationInteractiveCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Pick an animation to see it applied live.</Lumeo.Text>
            <Flex Gap="2">
                @foreach (var a in new[] { Skeleton.SkeletonAnimation.Pulse, Skeleton.SkeletonAnimation.Wave, Skeleton.SkeletonAnimation.None })
                {
                    var anim = a;
                    <Button Size="Button.ButtonSize.Sm"
                            Variant="@(_skeletonAnimation == anim ? Button.ButtonVariant.Default : Button.ButtonVariant.Outline)"
                            OnClick="@(() => _skeletonAnimation = anim)">@anim</Button>
                }
            </Flex>
            <Stack Gap="3">
                <Flex Align="center" Gap="4">
                    <Skeleton Animation="@_skeletonAnimation" Class="h-12 w-12 rounded-full" />
                    <Stack Gap="2" Class="flex-1">
                        <Skeleton Animation="@_skeletonAnimation" Class="h-4 w-[200px]" />
                        <Skeleton Animation="@_skeletonAnimation" Class="h-3 w-[150px]" />
                    </Stack>
                </Flex>
                <Skeleton Animation="@_skeletonAnimation" Class="h-4 w-full" />
                <Skeleton Animation="@_skeletonAnimation" Class="h-4 w-[80%]" />
            </Stack>
        </Stack>
    </ComponentDemo>
</Stack>

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

    <Stack Gap="8">
        <Stack>
            <Heading Level="3" Class="mb-3">Skeleton</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 italic text-muted-foreground" colspan="4">Skeleton is a simple pulsing placeholder element. Use the Class parameter to set width, height, and border-radius.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Animation</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">SkeletonAnimation</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Pulse</td>
                            <td class="p-3 text-muted-foreground">Animation style. Values: None, Pulse, Wave.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">SkeletonText / SkeletonCard / SkeletonCircle</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">Lines</td><td class="p-3 font-mono text-xs text-muted-foreground">int</td><td class="p-3 font-mono text-xs text-muted-foreground">3</td><td class="p-3 text-muted-foreground">SkeletonText — number of placeholder lines to render.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Animation</td><td class="p-3 font-mono text-xs text-muted-foreground">SkeletonAnimation</td><td class="p-3 font-mono text-xs text-muted-foreground">Pulse</td><td class="p-3 text-muted-foreground">Shared by all skeleton variants; controls the placeholder animation.</td></tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>
    </Stack>
</Stack>

@code {
    private Skeleton.SkeletonAnimation _skeletonAnimation = Skeleton.SkeletonAnimation.Pulse;

    private string _animationInteractiveCode = @"<Skeleton Animation=""Skeleton.SkeletonAnimation.Pulse"" Class=""h-4 w-[250px]"" />
<Skeleton Animation=""Skeleton.SkeletonAnimation.Wave"" Class=""h-4 w-[250px]"" />
<Skeleton Animation=""Skeleton.SkeletonAnimation.None"" Class=""h-4 w-[250px]"" />";

    private string _basicCode = @"<Stack Gap=""4"">
    <Skeleton Class=""h-4 w-[250px]"" />
    <Skeleton Class=""h-4 w-[200px]"" />
    <Skeleton Class=""h-4 w-[150px]"" />
</Stack>";

    private string _cardCode = @"<Card>
    <CardHeader>
        <Skeleton Class=""h-5 w-[180px]"" />
        <Skeleton Class=""h-4 w-[250px]"" />
    </CardHeader>
    <CardContent>
        <Stack Gap=""2"">
            <Skeleton Class=""h-4 w-full"" />
            <Skeleton Class=""h-4 w-full"" />
            <Skeleton Class=""h-4 w-[80%]"" />
        </Stack>
    </CardContent>
</Card>";

    private string _profileCode = @"<Flex Align=""center"" Gap=""4"">
    <Skeleton Class=""h-12 w-12 rounded-full"" />
    <Stack Gap=""2"">
        <Skeleton Class=""h-4 w-[200px]"" />
        <Skeleton Class=""h-4 w-[160px]"" />
    </Stack>
</Flex>";

    private string _listCode = @"@for (var i = 0; i < 3; i++)
{
    <Flex Align=""center"" Gap=""4"">
        <Skeleton Class=""h-10 w-10 rounded-full"" />
        <Stack Gap=""2"" Class=""flex-1"">
            <Skeleton Class=""h-4 w-[60%]"" />
            <Skeleton Class=""h-3 w-[40%]"" />
        </Stack>
    </Flex>
}";
}
