@page "/components/image-compare"

<PageTitle>Image Compare — Lumeo</PageTitle>

<PageHeader Title="Image Compare" Description="An interactive before/after image slider — drag the divider to reveal the difference between two images. Great for photo editing demos and product comparisons." />

<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>Before/after comparisons for photo retouching or image processing</li>
        <li>Design reviews showing original vs. revised versions</li>
        <li>Photo editing demos highlighting filter or adjustment effects</li>
        <li>Product comparisons where visual difference matters</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Horizontal Comparison" Code="@_horizontalCode">
        <ImageCompare BeforeSrc="https://images.unsplash.com/photo-1531297484001-80022131f5a1?w=800&q=60&grayscale"
                      AfterSrc="https://images.unsplash.com/photo-1531297484001-80022131f5a1?w=800&q=60"
                      BeforeLabel="Before"
                      AfterLabel="After"
                      Height="320px" />
    </ComponentDemo>

    <ComponentDemo Title="Vertical Comparison" Code="@_verticalCode">
        <ImageCompare BeforeSrc="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=60"
                      AfterSrc="https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?w=800&q=60"
                      BeforeLabel="Mountain"
                      AfterLabel="Forest"
                      Orientation="ImageCompare.ImageCompareOrientation.Vertical"
                      Height="320px" />
    </ComponentDemo>

    <ComponentDemo Title="Orientation (interactive)" Code="@_orientationInteractiveCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Switch orientation to see the divider axis change.</Lumeo.Text>
            <Segmented @bind-Value="_icOrientation">
                <SegmentedItem Value="Horizontal">Horizontal</SegmentedItem>
                <SegmentedItem Value="Vertical">Vertical</SegmentedItem>
            </Segmented>
            <ImageCompare BeforeSrc="https://images.unsplash.com/photo-1531297484001-80022131f5a1?w=800&q=60&grayscale"
                          AfterSrc="https://images.unsplash.com/photo-1531297484001-80022131f5a1?w=800&q=60"
                          BeforeLabel="Grayscale"
                          AfterLabel="Color"
                          Orientation="@_icOrientationEnum"
                          Height="280px" />
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Custom Initial Position" Code="@_positionCode">
        <ImageCompare BeforeSrc="https://images.unsplash.com/photo-1531297484001-80022131f5a1?w=800&q=60&grayscale"
                      AfterSrc="https://images.unsplash.com/photo-1531297484001-80022131f5a1?w=800&q=60"
                      InitialPosition="25"
                      BeforeLabel="Grayscale"
                      AfterLabel="Color"
                      Height="280px" />
    </ComponentDemo>

    <ComponentDemo Title="No Labels" Code="@_noLabelsCode">
        <ImageCompare BeforeSrc="https://images.unsplash.com/photo-1531297484001-80022131f5a1?w=800&q=60&grayscale"
                      AfterSrc="https://images.unsplash.com/photo-1531297484001-80022131f5a1?w=800&q=60"
                      BeforeLabel=""
                      AfterLabel=""
                      Height="260px" />
    </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">ImageCompare</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">BeforeSrc</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">URL of the "before" image (shown on the left/top).</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">AfterSrc</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">URL of the "after" image (shown on the right/bottom).</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">BeforeLabel</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">"Before"</td>
                            <td class="p-3 text-muted-foreground">Label overlay on the before image. Set to empty string to hide.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">AfterLabel</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">"After"</td>
                            <td class="p-3 text-muted-foreground">Label overlay on the after image. Set to empty string to hide.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">InitialPosition</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">50</td>
                            <td class="p-3 text-muted-foreground">Initial divider position as a percentage (1–99).</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">"400px"</td>
                            <td class="p-3 text-muted-foreground">Height of the comparison container.</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">"100%"</td>
                            <td class="p-3 text-muted-foreground">Width of the comparison container.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Orientation</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">ImageCompareOrientation</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Horizontal</td>
                            <td class="p-3 text-muted-foreground">Horizontal splits left/right; Vertical splits top/bottom.</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/image" class="text-primary hover:underline">Image</a> — Display a single image with preview and lazy loading</li>
        <li><a href="/components/slider" class="text-primary hover:underline">Slider</a> — A range input for numeric values</li>
        <li><a href="/components/card" class="text-primary hover:underline">Card</a> — Wrap comparisons in a card for structured layouts</li>
    </ul>
</div>

@code {
    private string _icOrientation = "Horizontal";
    private ImageCompare.ImageCompareOrientation _icOrientationEnum =>
        Enum.TryParse<ImageCompare.ImageCompareOrientation>(_icOrientation, out var v) ? v : ImageCompare.ImageCompareOrientation.Horizontal;

    private string _orientationInteractiveCode = @"<Segmented @bind-Value=""_orientation"">
    <SegmentedItem Value=""@ImageCompare.ImageCompareOrientation.Horizontal"">Horizontal</SegmentedItem>
    <SegmentedItem Value=""@ImageCompare.ImageCompareOrientation.Vertical"">Vertical</SegmentedItem>
</Segmented>
<ImageCompare BeforeSrc=""before.jpg"" AfterSrc=""after.jpg""
             BeforeLabel=""Before"" AfterLabel=""After""
             Orientation=""@_orientation"" Height=""280px"" />

@code { private ImageCompare.ImageCompareOrientation _orientation = ImageCompare.ImageCompareOrientation.Horizontal; }";

    private string _horizontalCode = @"<ImageCompare BeforeSrc=""before.jpg"" AfterSrc=""after.jpg""
             BeforeLabel=""Before"" AfterLabel=""After"" Height=""320px"" />";
    private string _verticalCode = @"<ImageCompare BeforeSrc=""img1.jpg"" AfterSrc=""img2.jpg""
             Orientation=""ImageCompare.ImageCompareOrientation.Vertical""
             Height=""320px"" />";
    private string _positionCode = @"<ImageCompare BeforeSrc=""before.jpg"" AfterSrc=""after.jpg""
             InitialPosition=""25"" Height=""280px"" />";
    private string _noLabelsCode = @"<ImageCompare BeforeSrc=""before.jpg"" AfterSrc=""after.jpg""
             BeforeLabel="""" AfterLabel="""" Height=""260px"" />";
}
