@page "/components/image"

<PageTitle>Image — Lumeo</PageTitle>

<PageHeader Title="Image" Description="An enhanced image component with lazy loading, fallback, preview lightbox, and gallery support." />

<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>Displaying images with click-to-zoom preview lightbox</li>
        <li>Photo galleries with grid layout and navigation</li>
        <li>Image previews with lazy loading for performance optimization</li>
        <li>Any image display that needs fallback handling on load errors</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Basic Image" Code="@_basicCode">
        <Image Src="https://picsum.photos/seed/lumeo-doc/400/250" Alt="Sample image" Width="400" Height="250" Class="rounded-lg" />
    </ComponentDemo>

    <ComponentDemo Title="With Preview" Code="@_previewCode">
        <Image Src="https://picsum.photos/seed/preview-doc/400/250" Alt="Click to preview" Width="400" Height="250" Preview="true" Class="rounded-lg" />
    </ComponentDemo>

    <ComponentDemo Title="Gallery" Code="@_galleryCode">
        <ImageGallery Images="@_galleryImages" Columns="4" Class="max-w-2xl" />
    </ComponentDemo>

    <Alert Variant="Alert.AlertVariant.Info" ShowIcon="true" Class="mt-6">
        <strong>Mobile (rc.49).</strong> Set <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono">Zoomable="true"</code> to enable native pinch-to-zoom on touch devices via the <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono">touch-action: pinch-zoom</code> hint and a pointer-event zoom gesture.
    </Alert>

    <Alert Variant="Alert.AlertVariant.Info" ShowIcon="true" Class="mt-4">
        <strong>Fullscreen gestures (rc.52).</strong> <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono">ImageGallery</code> supports touch gestures in the fullscreen preview: swipe left/right (≥ 60 px) to navigate between images, and two-finger pinch to zoom (25 %–300 %). Set <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono">GesturesEnabled="false"</code> to opt out.
    </Alert>

    <ComponentDemo Title="Pinch-to-Zoom" Code="@_zoomableCode">
        <Image Src="https://picsum.photos/seed/zoom-doc/400/250" Zoomable="true" Alt="Pinch to zoom on mobile" Width="400" Height="250" Class="rounded-lg" />
    </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">Image</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">Src</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">—</td>
                            <td class="p-3 text-muted-foreground">Image source URL.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Preview</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">Enable click-to-preview lightbox.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Lazy</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">Enable native lazy loading.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Width</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">—</td>
                            <td class="p-3 text-muted-foreground">Image width in pixels.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Height</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">—</td>
                            <td class="p-3 text-muted-foreground">Image height in pixels.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Alt</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">—</td>
                            <td class="p-3 text-muted-foreground">Alternative text for the image.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Fallback</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">—</td>
                            <td class="p-3 text-muted-foreground">Fallback image URL on error.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Zoomable</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">Enables pinch-to-zoom on touch devices (rc.49).</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>
        <Stack>
            <Heading Level="3" Class="mb-3">ImageGallery</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">Images</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">List&lt;ImageItem&gt;?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">List of images to display.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Columns</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">Grid columns count.</td>
                        </tr>
                                            <tr>
                            <td class="p-3 font-mono text-xs text-primary">Gap</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">Spacing between gallery items (Tailwind gap class, e.g. "4").</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">GesturesEnabled</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">true</td>
                            <td class="p-3 text-muted-foreground">Enables swipe (prev/next) and pinch-zoom gestures in the fullscreen preview on touch devices (rc.52).</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/avatar" class="text-primary hover:underline">Avatar</a> — Display small circular user or entity images</li>
        <li><a href="/components/aspect-ratio" class="text-primary hover:underline">AspectRatio</a> — Constrain images to a specific width-to-height ratio</li>
        <li><a href="/components/carousel" class="text-primary hover:underline">Carousel</a> — Cycle through images in a slideshow format</li>
    </ul>
</div>

@code {
    private List<ImageGallery.ImageItem> _galleryImages = new()
    {
        new("https://picsum.photos/seed/g1/300/200", "Image 1"),
        new("https://picsum.photos/seed/g2/300/200", "Image 2"),
        new("https://picsum.photos/seed/g3/300/200", "Image 3"),
        new("https://picsum.photos/seed/g4/300/200", "Image 4"),
    };

    private string _basicCode = @"<Image Src=""photo.jpg"" Alt=""Sample"" Width=""400"" Height=""250"" />";
    private string _previewCode = @"<Image Src=""photo.jpg"" Preview=""true"" />";
    private string _galleryCode = @"<ImageGallery Images=""@_images"" Columns=""4"" />";
    private string _zoomableCode = @"<Image Src=""photo.jpg"" Zoomable=""true"" Alt=""Pinch to zoom on mobile"" />";
}
