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

const styles: Record<string, { stripe: string; dot: string }> = {
  blue: { stripe: "bg-blue-500", dot: "bg-blue-500" },
  green: { stripe: "bg-emerald-500", dot: "bg-emerald-500" },
  amber: { stripe: "bg-amber-500", dot: "bg-amber-500" },
  red: { stripe: "bg-red-500", dot: "bg-red-500" },
  purple: { stripe: "bg-violet-500", dot: "bg-violet-500" },
};

export function KpiCard({ label, value, sub, hint, accent = "blue" }: Props) {
  const s = styles[accent] ?? styles.blue;
  return (
    <div className="bg-white border border-slate-200/60 rounded-2xl px-5 py-4 relative overflow-hidden shadow-sm group">
      <div className={`absolute left-0 top-0 bottom-0 w-1 ${s.stripe}`} />
      <p className="text-[10px] font-bold text-slate-400 uppercase tracking-[0.08em] mb-2 flex items-center gap-1.5">
        <span className={`w-1.5 h-1.5 rounded-full ${s.dot}`} />
        {label}
      </p>
      <p className="text-[28px] font-extrabold text-slate-900 leading-none tracking-tight">
        {value}
      </p>
      {sub && (
        <p className="text-[11px] text-slate-400 mt-1.5 font-medium">{sub}</p>
      )}
      {hint && (
        <p className="text-[10px] text-slate-400/80 mt-2 leading-snug italic">{hint}</p>
      )}
    </div>
  );
}
