"use client";

import { motion } from "framer-motion";
import { cn } from "@/lib/utils";

/** A metric with an optional usage bar. Bar colour escalates with pressure —
 *  a disk at 94% should not look the same as one at 12%. */
export function StatCard({
  label,
  value,
  sub,
  pct,
  index = 0,
}: {
  label: string;
  value: React.ReactNode;
  sub?: React.ReactNode;
  pct?: number | null;
  index?: number;
}) {
  const tone =
    pct == null ? "bg-accent" : pct >= 90 ? "bg-err" : pct >= 75 ? "bg-warn" : "bg-accent";

  return (
    <motion.div
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: Math.min(index * 0.04, 0.4), type: "spring", stiffness: 320, damping: 30 }}
      className="card rounded-card p-3.5"
    >
      <div className="text-caption uppercase tracking-[0.6px] text-dim">{label}</div>
      <div className="mt-0.5 text-[22px] font-bold leading-tight tracking-[-0.6px]">
        {value}
      </div>
      {sub && <div className="mt-0.5 text-caption text-dim clamp1">{sub}</div>}
      {pct != null && (
        <div className="mt-2 h-1 overflow-hidden rounded-full bg-faint">
          <motion.i
            className={cn("block h-full rounded-full", tone)}
            initial={{ width: 0 }}
            animate={{ width: `${Math.min(100, Math.max(0, pct))}%` }}
            transition={{ duration: 0.6, ease: "easeOut" }}
          />
        </div>
      )}
    </motion.div>
  );
}