import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
import * as StatsCardStories from './stats-card.stories';

<Meta of={StatsCardStories} />

<Title />
<Subtitle>A pre-configured KPI card for dashboard overview panels.</Subtitle>

<Description />

<Primary />

---

## Variations

<Stories />

---

## AI Best Practices

> [!IMPORTANT]
> - **Trend Direction** — Provide a numeric `trend.value` (positive or negative); the component will automatically select the appropriate icon (Up/Down) and color (Success/Destructive).
> - **Icon Selection** — Use high-level descriptive icons (e.g., `DollarSign`, `Users`) with `className="size-5"`.
> - **Formatting** — Pass the `value` as a pre-formatted string (e.g., `"$45,231"`) while passing the `trend.value` as a raw number for built-in calculation.