"use client";
import { AlertTriangle, Info, AlertCircle } from "lucide-react";
import type { Caveat } from "@/lib/services/analysis-schema";

export function CaveatBanners({ caveats }: { caveats: Caveat[] }) {
  const iconMap = { critical: AlertCircle, warning: AlertTriangle, info: Info };
  const colorMap = {
    critical: "bg-red-50 border-red-200 text-red-700",
    warning: "bg-amber-50 border-amber-200 text-amber-700",
    info: "bg-blue-50 border-blue-200 text-blue-600",
  };

  return (
    <div className="space-y-2">
      {caveats.map((c, i) => {
        const Icon = iconMap[c.severity] ?? Info;
        return (
          <div key={i} className={`flex items-start gap-2.5 px-4 py-3 rounded-xl border text-[11px] ${colorMap[c.severity] ?? colorMap.info}`}>
            <Icon className="w-4 h-4 shrink-0 mt-0.5" />
            <div>
              <p className="font-semibold">{c.title}</p>
              <p className="opacity-80 mt-0.5 leading-relaxed">{c.description}</p>
            </div>
          </div>
        );
      })}
    </div>
  );
}
