KPI grid

import {
  Card,
  CardContent,
  Metric,
  MetricDelta,
  MetricLabel,
  MetricValue,
} from "@cooud-ui/ui";
import { Activity, DollarSign, TrendingDown, Users } from "lucide-react";

export function StatsBlock() {
  const stats = [
    {
      label: "Revenue",
      value: "$48,290",
      delta: "+12.4%",
      trend: "up" as const,
      icon: DollarSign,
      hint: "vs. last month",
    },
    {
      label: "Active users",
      value: "9,184",
      delta: "+5.2%",
      trend: "up" as const,
      icon: Users,
      hint: "vs. last month",
    },
    {
      label: "Conversion",
      value: "3.84%",
      delta: "+0.6%",
      trend: "up" as const,
      icon: Activity,
      hint: "vs. last month",
    },
    {
      label: "Churn",
      value: "1.92%",
      delta: "-0.3%",
      trend: "down" as const,
      icon: TrendingDown,
      hint: "vs. last month",
    },
  ];

  return (
    <div className="grid grid-cols-[repeat(auto-fit,minmax(min(100%,13rem),1fr))] gap-4">
      {stats.map(({ label, value, delta, trend, icon: Icon, hint }) => (
        <Card key={label} className="gap-4 py-5">
          <CardContent className="flex flex-col gap-3">
            <div className="flex items-center justify-between">
              <span className="inline-flex size-9 items-center justify-center rounded-lg bg-surface-overlay text-fg-secondary">
                <Icon className="size-4" aria-hidden="true" />
              </span>
              <MetricDelta trend={trend}>{delta}</MetricDelta>
            </div>
            <Metric className="gap-1.5">
              <MetricLabel>{label}</MetricLabel>
              <MetricValue className="text-3xl">{value}</MetricValue>
              <span className="text-xs text-fg-tertiary">{hint}</span>
            </Metric>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}