Stat cards (premium KPIs)

"use client";

import { StatCard, StatGrid } from "@waveinno/ui";
import { Banknote, Car, Gauge, TrendingUp } from "lucide-react";

export default function StatCardsExample() {
  return (
    <div className="space-y-3">
      <StatGrid>
        <StatCard variant="gradient" label="Revenue today" value="48,250" currency delta={12.4} deltaLabel="vs yesterday" icon={<TrendingUp />} />
        <StatCard variant="icon" label="Cars inside" value="312" icon={<Car />} delta={6.2} deltaLabel="vs last Thu" />
        <StatCard variant="icon" label="Failed payments" value="3" icon={<Banknote />} tone="danger" delta={-40} invertDelta deltaLabel="vs last week" />
        <StatCard variant="target" label="Monthly target" value="৳9.6L" target={{ percent: 72, label: "of ৳13.3L this month" }} />
      </StatGrid>
      <StatGrid className="xl:grid-cols-3">
        <StatCard variant="spark" label="Occupancy, 14 days" value="82%" delta={4.1} deltaLabel="vs prior 14 days" spark={[61, 64, 63, 68, 70, 69, 72, 75, 74, 78, 77, 80, 81, 82]} icon={<Gauge />} />
        <StatCard variant="spark" label="Avg wait at the gate" value="38s" delta={9.5} invertDelta deltaLabel="slower" spark={[30, 31, 29, 33, 32, 34, 35, 33, 36, 37, 36, 38, 39, 38]} tone="warning" />
        <StatCard
          variant="comparison"
          label="How people paid"
          value=""
          parts={[
            { label: "Cash at the gate", value: 28450, display: "৳28,450" },
            { label: "Digital", value: 19800, display: "৳19,800" },
          ]}
        />
      </StatGrid>
    </div>
  );
}