@page "/components/delta"

<PageTitle>Delta — Lumeo</PageTitle>

<PageHeader Title="Delta" Description="Trend indicator showing delta value with up/down arrow and color." />

<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>Show percentage or absolute change next to a KPI metric.</li>
        <li>Indicate revenue growth, churn delta, or inventory variance at a glance.</li>
        <li>Use <code class="text-xs bg-muted px-1 py-0.5 rounded">Positive="DeltaDirection.Bad"</code> for metrics where lower is better (e.g. error rate).</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Percent Delta" Code="@_percentCode">
        <Flex Gap="2" Wrap="true" Align="center">
            <Delta Value="12.5" />
            <Delta Value="-3.2" />
            <Delta Value="0" />
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Absolute Delta" Code="@_absoluteCode">
        <Flex Gap="2" Wrap="true" Align="center">
            <Delta Value="420" Format="Delta.DeltaFormat.Absolute" />
            <Delta Value="-88" Format="Delta.DeltaFormat.Absolute" />
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Inverted Positive (Lower is Better)" Code="@_invertedCode">
        <Flex Gap="2" Wrap="true" Align="center">
            <Delta Value="-5.1" Positive="Delta.DeltaDirection.Bad" />
            <Delta Value="2.3" Positive="Delta.DeltaDirection.Bad" />
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="No Arrow" Code="@_noArrowCode">
        <Flex Gap="2" Wrap="true" Align="center">
            <Delta Value="7.4" ShowArrow="false" />
            <Delta Value="-1.9" ShowArrow="false" />
        </Flex>
    </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">Delta</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">Value</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</td>
                            <td class="p-3 text-muted-foreground">The numeric delta. Positive renders green (good), negative renders red (bad) by default.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Format</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">DeltaFormat</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Percent</td>
                            <td class="p-3 text-muted-foreground">Display format. <code class="text-xs">Percent</code> appends %; <code class="text-xs">Absolute</code> shows raw number.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Positive</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">DeltaDirection</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Good</td>
                            <td class="p-3 text-muted-foreground">Determines color semantics. <code class="text-xs">Good</code> = up is green; <code class="text-xs">Bad</code> = up is red (for metrics like churn or error rate).</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ShowArrow</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">Whether to show the directional arrow icon.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Class</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">Additional CSS classes merged onto the root span.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Culture</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">CultureInfo?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Overrides CurrentCulture for number formatting; null honours ASP.NET request localization.</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/kpi-card" class="text-primary hover:underline">KpiCard</a> — Dashboard KPI tile that embeds a Delta for trend display.</li>
        <li><a href="/components/spark-card" class="text-primary hover:underline">SparkCard</a> — Small card with an inline sparkline chart.</li>
        <li><a href="/components/statistic" class="text-primary hover:underline">Statistic</a> — Big-number statistic display with label and unit.</li>
    </ul>
</div>

@code {
    private string _percentCode = @"<Delta Value=""12.5"" />
<Delta Value=""-3.2"" />
<Delta Value=""0"" />";

    private string _absoluteCode = @"<Delta Value=""420"" Format=""Delta.DeltaFormat.Absolute"" />
<Delta Value=""-88"" Format=""Delta.DeltaFormat.Absolute"" />";

    private string _invertedCode = @"<Delta Value=""-5.1"" Positive=""Delta.DeltaDirection.Bad"" />
<Delta Value=""2.3"" Positive=""Delta.DeltaDirection.Bad"" />";

    private string _noArrowCode = @"<Delta Value=""7.4"" ShowArrow=""false"" />
<Delta Value=""-1.9"" ShowArrow=""false"" />";
}
