import { MetricCard, CardShell } from '@so.boss/gloss-ui';
import type { MetricCardProps } from '@so.boss/gloss-ui';

// Standard variant
<CardShell>
  <MetricCard
    variant="standard"
    label="Total Revenue"
    value={125430}
    valueFormat={{ prefix: '$', abbreviated: true }}
    trend={{ value: 12.5, direction: 'up' }}
    subtitle="MTD"
  />
</CardShell>

// Sparkline variant
<CardShell>
  <MetricCard
    variant="sparkline"
    label="Daily Orders"
    value={847}
    sparklineData={[42, 38, 51, 47, 55, 60, 58, 63]}
    trend={{ value: -3.2, direction: 'down' }}
    accentColor="#6366f1"
  />
</CardShell>

// Donut variant
<CardShell>
  <MetricCard
    variant="donut"
    label="Fill Rate"
    value={78}
    valueFormat={{ suffix: '%' }}
    donutValue={78}
    donutMax={100}
    accentColor="#10b981"
  />
</CardShell>