@page "/components/aspect-ratio"

<PageTitle>Aspect Ratio — Lumeo</PageTitle>

<PageHeader Title="Aspect Ratio" Description="Displays content within a desired ratio." />

<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>Maintaining consistent image or video aspect ratios across layouts</li>
        <li>Video embeds that need to preserve 16:9 or other standard ratios</li>
        <li>Responsive media cards where the thumbnail should not distort</li>
        <li>Grid layouts with uniformly sized media containers</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="16:9 Ratio" Code="@_defaultCode">
        <Container MaxWidth="md">
            <AspectRatio Ratio="16.0 / 9.0" Class="rounded-md overflow-hidden bg-muted">
                <Flex Class="items-center justify-center h-full text-muted-foreground text-sm">
                    16:9 Aspect Ratio
                </Flex>
            </AspectRatio>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Different Ratios" Code="@_ratiosCode">
        <Grid Columns="3" Gap="4" Class="grid-cols-1 sm:grid-cols-3">
            <Stack>
                <Lumeo.Text Size="sm" Color="muted" Class="mb-2">1:1 (Square)</Lumeo.Text>
                <AspectRatio Ratio="1" Class="rounded-md overflow-hidden bg-muted">
                    <Flex Class="items-center justify-center h-full text-muted-foreground text-sm">1:1</Flex>
                </AspectRatio>
            </Stack>
            <Stack>
                <Lumeo.Text Size="sm" Color="muted" Class="mb-2">4:3</Lumeo.Text>
                <AspectRatio Ratio="4.0 / 3.0" Class="rounded-md overflow-hidden bg-muted">
                    <Flex Class="items-center justify-center h-full text-muted-foreground text-sm">4:3</Flex>
                </AspectRatio>
            </Stack>
            <Stack>
                <Lumeo.Text Size="sm" Color="muted" Class="mb-2">21:9 (Ultra-wide)</Lumeo.Text>
                <AspectRatio Ratio="21.0 / 9.0" Class="rounded-md overflow-hidden bg-muted">
                    <Flex Class="items-center justify-center h-full text-muted-foreground text-sm">21:9</Flex>
                </AspectRatio>
            </Stack>
        </Grid>
    </ComponentDemo>

    <ComponentDemo Title="Media Card" Code="@_mediaCardCode">
        <Container MaxWidth="sm">
            <Card>
                <AspectRatio Ratio="16.0 / 9.0" Class="rounded-t-lg overflow-hidden bg-muted">
                    <Flex Class="items-center justify-center h-full text-muted-foreground text-sm">
                        <DynamicIcon Name="Eye" Class="h-8 w-8 opacity-50" />
                    </Flex>
                </AspectRatio>
                <CardContent Class="p-4">
                    <Lumeo.Text Class="font-semibold text-foreground">Getting Started with Lumeo</Lumeo.Text>
                    <Lumeo.Text Size="sm" Color="muted" Class="mt-1">Learn how to build beautiful UIs with Lumeo components.</Lumeo.Text>
                </CardContent>
            </Card>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Ratio — interactive" Code="@_interactiveRatioCode">
        <Container MaxWidth="sm">
            <Stack Gap="4">
                <Lumeo.Text Size="sm" Color="muted">Pick a ratio to see it applied live.</Lumeo.Text>
                <Flex Wrap="true" Gap="2">
                    @foreach (var r in _ratioOptions)
                    {
                        var ratio = r;
                        <Button Size="Button.ButtonSize.Sm"
                                Variant="@(_selectedRatioLabel == ratio.label ? Button.ButtonVariant.Default : Button.ButtonVariant.Outline)"
                                OnClick="@(() => { _selectedRatioLabel = ratio.label; _selectedRatio = ratio.value; })">@ratio.label</Button>
                    }
                </Flex>
                <AspectRatio Ratio="@_selectedRatio" Class="rounded-md overflow-hidden bg-muted">
                    <Flex Class="items-center justify-center h-full text-muted-foreground text-sm">
                        @_selectedRatioLabel
                    </Flex>
                </AspectRatio>
            </Stack>
        </Container>
    </ComponentDemo>
</Stack>

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

    <Heading Id="aspectratio" Level="3" Class="mt-8 scroll-mt-20">AspectRatio</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>Content to display inside the aspect ratio container.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Ratio</TableCell><TableCell Class="font-mono text-xs">double</TableCell><TableCell Class="font-mono text-xs">1</TableCell><TableCell>The desired width-to-height ratio (e.g. 16.0/9.0).</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 for the inner container.</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 applied to the outer wrapper.</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/avatar" class="text-primary hover:underline">Avatar</a> — Circular or rounded image containers for user profile pictures</li>
        <li><a href="/components/card" class="text-primary hover:underline">Card</a> — Card container often used with AspectRatio for media cards</li>
        <li><a href="/components/skeleton" class="text-primary hover:underline">Skeleton</a> — Loading placeholder that can match aspect ratio dimensions</li>
    </ul>
</div>

@code {
    private record RatioOption(string label, double value);
    private RatioOption[] _ratioOptions =
    [
        new("1:1", 1.0),
        new("4:3", 4.0 / 3.0),
        new("16:9", 16.0 / 9.0),
        new("21:9", 21.0 / 9.0),
        new("3:2", 3.0 / 2.0),
        new("2:3", 2.0 / 3.0),
    ];
    private string _selectedRatioLabel = "16:9";
    private double _selectedRatio = 16.0 / 9.0;

    private string _interactiveRatioCode = @"<AspectRatio Ratio=""16.0 / 9.0"" Class=""rounded-md overflow-hidden bg-muted"">
    <div class=""flex items-center justify-center h-full text-sm text-muted-foreground"">16:9</div>
</AspectRatio>";

    private string _defaultCode = @"<AspectRatio Ratio=""16.0 / 9.0"" Class=""rounded-md overflow-hidden bg-muted"">
    <div class=""flex items-center justify-center h-full"">
        16:9 Aspect Ratio
    </div>
</AspectRatio>";

    private string _ratiosCode = @"<AspectRatio Ratio=""1"" Class=""rounded-md overflow-hidden bg-muted"">
    <div class=""flex items-center justify-center h-full"">1:1</div>
</AspectRatio>

<AspectRatio Ratio=""4.0 / 3.0"" Class=""rounded-md overflow-hidden bg-muted"">
    <div class=""flex items-center justify-center h-full"">4:3</div>
</AspectRatio>";

    private string _mediaCardCode = @"<Card>
    <AspectRatio Ratio=""16.0 / 9.0"" Class=""rounded-t-lg overflow-hidden bg-muted"">
        <div class=""flex items-center justify-center h-full text-muted-foreground"">
            Thumbnail
        </div>
    </AspectRatio>
    <CardContent Class=""p-4"">
        <Lumeo.Text Weight=""semibold"">Getting Started with Lumeo</Lumeo.Text>
        <Lumeo.Text Size=""sm"" Color=""muted"" Class=""mt-1"">Learn how to build beautiful UIs.</Lumeo.Text>
    </CardContent>
</Card>";
}
