@page "/components/spinner"

<PageTitle>Spinner — Lumeo</PageTitle>

<PageHeader Title="Spinner" Description="A loading spinner indicator with multiple sizes." />

<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>Loading indicators while data is being fetched</li>
        <li>Button loading state during form submission or async operations</li>
        <li>Inline loading feedback for sections of a page that update independently</li>
        <li>Any short-duration wait where a full skeleton layout is unnecessary</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Sizes" Code="@_sizesCode">
        <Flex Align="center" Gap="6">
            <Stack Gap="2" Align="center">
                <Spinner Size="Spinner.SpinnerSize.Sm" />
                <Lumeo.Text As="span" Size="xs" Color="muted">Small</Lumeo.Text>
            </Stack>
            <Stack Gap="2" Align="center">
                <Spinner />
                <Lumeo.Text As="span" Size="xs" Color="muted">Default</Lumeo.Text>
            </Stack>
            <Stack Gap="2" Align="center">
                <Spinner Size="Spinner.SpinnerSize.Lg" />
                <Lumeo.Text As="span" Size="xs" Color="muted">Large</Lumeo.Text>
            </Stack>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="With Text" Code="@_textCode">
        <Flex Align="center" Gap="2">
            <Spinner Size="Spinner.SpinnerSize.Sm" />
            <Lumeo.Text As="span" Size="sm" Color="muted">Loading...</Lumeo.Text>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="In a Button" Code="@_buttonCode">
        <Button Disabled="true">
            <Spinner Size="Spinner.SpinnerSize.Sm" Class="mr-2" />
            Please wait
        </Button>
    </ComponentDemo>

    <ComponentDemo Title="Variant — interactive" Code="@_variantInteractiveCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Pick a variant to see it applied live.</Lumeo.Text>
            <Flex Gap="2">
                @foreach (var v in new[] { Spinner.SpinnerVariant.Ring, Spinner.SpinnerVariant.Dots, Spinner.SpinnerVariant.Bars })
                {
                    var variant = v;
                    <Button Size="Button.ButtonSize.Sm"
                            Variant="@(_spinnerVariant == variant ? Button.ButtonVariant.Default : Button.ButtonVariant.Outline)"
                            OnClick="@(() => _spinnerVariant = variant)">@variant</Button>
                }
            </Flex>
            <Flex Align="center" Gap="3">
                <Spinner Variant="@_spinnerVariant" />
                <Lumeo.Text As="span" Size="sm" Color="muted">@_spinnerVariant variant</Lumeo.Text>
            </Flex>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="All Variants" Code="@_allVariantsCode">
        <Flex Align="center" Gap="8">
            <Stack Gap="2" Align="center">
                <Spinner Variant="Spinner.SpinnerVariant.Ring" />
                <Lumeo.Text As="span" Size="xs" Color="muted">Ring</Lumeo.Text>
            </Stack>
            <Stack Gap="2" Align="center">
                <Spinner Variant="Spinner.SpinnerVariant.Dots" />
                <Lumeo.Text As="span" Size="xs" Color="muted">Dots</Lumeo.Text>
            </Stack>
            <Stack Gap="2" Align="center">
                <Spinner Variant="Spinner.SpinnerVariant.Bars" />
                <Lumeo.Text As="span" Size="xs" Color="muted">Bars</Lumeo.Text>
            </Stack>
        </Flex>
    </ComponentDemo>
</Stack>

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

    <Heading Id="spinner" Level="3" Class="mt-8 scroll-mt-20">Spinner</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">Size</TableCell><TableCell Class="font-mono text-xs">SpinnerSize</TableCell><TableCell Class="font-mono text-xs">Default</TableCell><TableCell>Size of the spinner. Values: Sm (16px), Default (24px), Lg (32px).</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Variant</TableCell><TableCell Class="font-mono text-xs">SpinnerVariant</TableCell><TableCell Class="font-mono text-xs">Circle</TableCell><TableCell>Shape of the spinner. Values: Circle, Dots, Bars.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Color</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Override color (CSS color or Tailwind token).</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Label</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Accessible label announced to screen readers.</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.</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/progress" class="text-primary hover:underline">Progress</a> — Determinate progress bar when the completion percentage is known</li>
        <li><a href="/components/skeleton" class="text-primary hover:underline">Skeleton</a> — Placeholder layout shimmer for content-heavy loading states</li>
        <li><a href="/components/button" class="text-primary hover:underline">Button</a> — Embed a Spinner inside a disabled button for submit loading state</li>
    </ul>
</div>

@code {
    private Spinner.SpinnerVariant _spinnerVariant = Spinner.SpinnerVariant.Ring;

    private string _variantInteractiveCode = @"<Spinner Variant=""Spinner.SpinnerVariant.Ring"" />
<Spinner Variant=""Spinner.SpinnerVariant.Dots"" />
<Spinner Variant=""Spinner.SpinnerVariant.Bars"" />";

    private string _allVariantsCode = @"<Spinner Variant=""Spinner.SpinnerVariant.Ring"" />
<Spinner Variant=""Spinner.SpinnerVariant.Dots"" />
<Spinner Variant=""Spinner.SpinnerVariant.Bars"" />";

    private string _sizesCode = @"<Spinner Size=""Spinner.SpinnerSize.Sm"" />
<Spinner />
<Spinner Size=""Spinner.SpinnerSize.Lg"" />";

    private string _textCode = @"<Flex Align=""center"" Gap=""2"">
    <Spinner Size=""Spinner.SpinnerSize.Sm"" />
    <Lumeo.Text As=""span"" Size=""sm"" Color=""muted"">Loading...</Lumeo.Text>
</Flex>";

    private string _buttonCode = @"<Button Disabled=""true"">
    <Spinner Size=""Spinner.SpinnerSize.Sm"" Class=""mr-2"" />
    Please wait
</Button>";
}
