import { ArrowDownRight, ArrowUpRight, RefreshCw } from "lucide-react";
import { Card, Chip } from "@sisyphos-ui/react";

const STATS = [
  { label: "Monthly active users", value: "48,294", delta: "+12.4%", trend: "up" as const, context: "vs 42,952 last month" },
  { label: "Sessions today",       value: "3,128",  delta: "+5.2%",  trend: "up" as const, context: "vs avg 2,973" },
  { label: "Conversion rate",      value: "4.7%",   delta: "−0.3%",  trend: "down" as const, context: "vs 5.0% last week" },
  { label: "Avg. response time",   value: "182 ms", delta: "−8.1%",  trend: "up" as const, context: "down from 198 ms" },
];

export function StatsRow() {
  return (
    <section className="px-6 py-12">
      <header className="flex flex-wrap items-end justify-between gap-3 border-b pb-5">
        <div className="flex flex-col gap-1.5">
          <span className="text-xs font-semibold uppercase tracking-widest text-orange-600">
            Overview
          </span>
          <h2 className="text-2xl font-bold tracking-tight">This month</h2>
        </div>
        <p className="inline-flex items-center gap-1.5 text-sm text-zinc-500">
          <RefreshCw className="size-3.5 text-zinc-400" />
          Last refresh 12 minutes ago
        </p>
      </header>

      <ul className="mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {STATS.map((stat) => {
          const tone = stat.trend === "up" ? "success" : stat.trend === "down" ? "error" : "info";
          const Arrow = stat.trend === "up" ? ArrowUpRight : ArrowDownRight;
          return (
            <li key={stat.label}>
              <Card variant="outlined" className="h-full">
                <Card.Body>
                  <div className="flex flex-col gap-5">
                    <span className="truncate text-xs font-semibold uppercase tracking-wider text-zinc-500">
                      {stat.label}
                    </span>
                    <span
                      className="text-4xl font-bold leading-none tracking-tight"
                      style={{ fontVariantNumeric: "tabular-nums" }}
                    >
                      {stat.value}
                    </span>
                    <div className="flex items-center gap-2.5">
                      <Chip variant="soft" color={tone} size="sm" startIcon={<Arrow className="size-3" />}>
                        {stat.delta}
                      </Chip>
                      {stat.context && (
                        <span className="truncate text-xs text-zinc-400">{stat.context}</span>
                      )}
                    </div>
                  </div>
                </Card.Body>
              </Card>
            </li>
          );
        })}
      </ul>
    </section>
  );
}
Components used

Used in templates
