import type { Insight } from "../lib/deriveMetrics";

const SEVERITY_STYLES: Record<string, { border: string; badge: string; badgeText: string }> = {
  critical: { border: "border-l-red-600", badge: "bg-red-50 text-red-700", badgeText: "Critical" },
  high: { border: "border-l-amber-500", badge: "bg-amber-50 text-amber-700", badgeText: "High" },
  medium: { border: "border-l-slate-400", badge: "bg-slate-100 text-slate-600", badgeText: "Medium" },
  info: { border: "border-l-slate-300", badge: "bg-slate-50 text-slate-500", badgeText: "Info" },
};

export function InsightCard({ insight }: { insight: Insight }) {
  const s = SEVERITY_STYLES[insight.severity] ?? SEVERITY_STYLES.info;
  return (
    <div className={`bg-white border border-slate-200 border-l-[3px] ${s.border} rounded-lg px-4 py-3`}>
      <div className="flex items-center gap-2 mb-1.5">
        <span className={`text-[9px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded ${s.badge}`}>
          {s.badgeText}
        </span>
        <span className="text-[12px] font-medium text-slate-700">{insight.title}</span>
      </div>
      <p className="text-[20px] font-bold text-slate-900 leading-tight">{insight.metric}</p>
      <p className="text-[11px] text-slate-500 mt-1">{insight.explanation}</p>
    </div>
  );
}
