Stats

"use client";
import { TrendingUp, TrendingDown } from "lucide-react";
import { cn } from "@/lib/utils";

type State = "normal" | "up" | "down" | "loading";

const STATS = [
{ label: "Revenue", value: "$48,210", trend: 12.4 },
{ label: "Users", value: "2,341", trend: -3.2 },
{ label: "Sessions", value: "12,488", trend: 8.1 },
];

export function Stats({ state = "normal" }: { state?: State }) {
if (state === "loading") {
  return (
    <div className="grid w-full max-w-lg grid-cols-3 gap-3">
      {[0, 1, 2].map((i) => (
        <div key={i} className="rounded-lg border border-border p-4 space-y-2">
          <div className="h-3 w-1/2 animate-pulse rounded bg-muted" />
          <div className="h-6 w-2/3 animate-pulse rounded bg-muted" />
          <div className="h-3 w-1/3 animate-pulse rounded bg-muted" />
        </div>
      ))}
    </div>
  );
}

return (
  <div className="grid w-full max-w-lg grid-cols-3 gap-3">
    {STATS.map((s, i) => {
      let trend = s.trend;
      if (state === "up") trend = Math.abs(s.trend);
      else if (state === "down") trend = -Math.abs(s.trend);
      const up = trend >= 0;
      return (
        <div key={i} className="rounded-lg border border-border bg-background/40 p-4">
          <p className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground/70">
            {s.label}
          </p>
          <p className="mt-1 text-xl font-medium tabular-nums">{s.value}</p>
          <p
            className={cn(
              "mt-1 inline-flex items-center gap-1 font-mono text-[11px]",
              up ? "text-emerald-500" : "text-red-500",
            )}
          >
            {up ? <TrendingUp className="h-3 w-3" /> : <TrendingDown className="h-3 w-3" />}
            {up ? "+" : ""}
            {trend.toFixed(1)}%
          </p>
        </div>
      );
    })}
  </div>
);
}