interface Props {
  label: string;
  value: string | number;
  hint?: string;
  accent?: string;
}

const DOT_COLORS: Record<string, string> = {
  indigo: "bg-indigo-500",
  emerald: "bg-emerald-500",
  amber: "bg-amber-500",
  red: "bg-red-500",
  cyan: "bg-cyan-500",
  purple: "bg-violet-500",
};

export function StatCard({ label, value, hint, accent = "indigo" }: Props) {
  const dot = DOT_COLORS[accent] ?? DOT_COLORS.indigo;
  return (
    <div className="bg-white rounded-xl border border-slate-200/60 shadow-sm px-5 py-4">
      <p className="text-[32px] font-extrabold text-slate-900 leading-none tracking-tight">
        {value}
      </p>
      <p className="text-[11px] text-slate-400 font-semibold mt-1.5 flex items-center gap-1.5 uppercase tracking-wide">
        <span className={`w-1.5 h-1.5 rounded-full ${dot}`} />
        {label}
      </p>
      {hint && (
        <p className="text-[10px] text-slate-400/80 mt-1.5 leading-snug italic">{hint}</p>
      )}
    </div>
  );
}
