@page "/components/watermark"

<PageTitle>Watermark — Lumeo</PageTitle>

<PageHeader Title="Watermark" Description="Adds a repeating text watermark overlay to content." />

<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>Document protection to discourage unauthorized screenshots or sharing</li>
        <li>Draft indicators overlaid on content that is not yet finalized</li>
        <li>Confidential overlays marking sensitive or restricted information</li>
        <li>Branding watermarks on previews or demo content</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Basic Watermark" Code="@_codeBasic">
        <Watermark Text="Confidential" Class="rounded-lg border border-border/40">
            <Stack Gap="4" Class="p-8">
                <Lumeo.Text Color="foreground">This document contains sensitive information that should not be shared externally.</Lumeo.Text>
                <Lumeo.Text Color="muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</Lumeo.Text>
            </Stack>
        </Watermark>
    </ComponentDemo>

    <ComponentDemo Title="Custom Settings" Code="@_codeCustom">
        <Watermark Text="DRAFT" Rotation="-30" FontSize="20" Opacity="0.15" Gap="120" Class="rounded-lg border border-border/40">
            <Stack Gap="2" Class="p-8">
                <Heading Level="3" Size="lg">Draft Document</Heading>
                <Lumeo.Text Color="muted">This is a work in progress. Content may change before final publication.</Lumeo.Text>
            </Stack>
        </Watermark>
    </ComponentDemo>
</Stack>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</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">Text</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">Watermark text to display.</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">Rotation</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">-22</td><td class="p-3 text-muted-foreground">Text rotation angle in degrees.</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">int</td><td class="p-3 font-mono text-xs text-muted-foreground">100</td><td class="p-3 text-muted-foreground">Spacing between watermark repetitions.</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">FontSize</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">14</td><td class="p-3 text-muted-foreground">Font size in pixels.</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">Opacity</td><td class="p-3 font-mono text-xs text-muted-foreground">double</td><td class="p-3 font-mono text-xs text-muted-foreground">0.1</td><td class="p-3 text-muted-foreground">Text opacity (0-1).</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">ChildContent</td><td class="p-3 font-mono text-xs text-muted-foreground">RenderFragment?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">Content to display under the watermark.</td></tr>
            </tbody>
        </table>
    </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 images that may need watermark protection</li>
        <li><a href="/components/card" class="text-primary hover:underline">Card</a> — Container for content that can be watermarked</li>
    </ul>
</div>

@code {
    private string _codeBasic = @"<Watermark Text=""Confidential"">
    <Stack Gap=""4"" Class=""p-8"">
        <Lumeo.Text Color=""foreground"">This document contains sensitive information.</Lumeo.Text>
    </Stack>
</Watermark>";

    private string _codeCustom = @"<Watermark Text=""DRAFT"" Rotation=""-30"" FontSize=""20"" Opacity=""0.15"" Gap=""120"">
    <Stack Gap=""2"" Class=""p-8"">
        <Heading Level=""3"" Size=""lg"">Draft Document</Heading>
        <Lumeo.Text Color=""muted"">This is a work in progress.</Lumeo.Text>
    </Stack>
</Watermark>";
}
