Empty

import { Card, CardContent, Metric, MetricLabel, MetricValue } from "@cronus-ui/ui";
import { KPIS } from "../lib/demo-saas.js";
import { Activity, DollarSign, TrendingDown, Users } from "lucide-react";

const STAT_ICONS = [DollarSign, Users, Activity, TrendingDown] as const;

export function StatsEmptyBlock() {
  const stats = KPIS.map((kpi, i) => ({
    label: kpi.label,
    icon: STAT_ICONS[i] ?? DollarSign,
  }));

  return (
    <div className="grid grid-cols-[repeat(auto-fit,minmax(min(100%,13rem),1fr))] gap-4">
      {stats.map(({ label, icon: Icon }) => (
        <Card key={label} className="gap-4 py-5">
          <CardContent className="flex flex-col gap-3">
            <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>
            <Metric className="gap-1.5">
              <MetricLabel>{label}</MetricLabel>
              <MetricValue className="text-3xl text-fg-tertiary">—</MetricValue>
              <span className="text-xs text-fg-tertiary">No data yet</span>
            </Metric>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}