src/components/model/FlagNotes.tsx

import clsx from "clsx";
import type { ComponentType } from "react";
import { AlertTriangle, Lock, ShieldCheck, Snowflake } from "lucide-react";
import type { ModelFlags } from "@/lib/types";

export interface FlagNotesProps {
  flags?: ModelFlags;
  className?: string;
}

interface Note {
  key: keyof ModelFlags;
  Icon: ComponentType<{ size?: number | string; className?: string }>;
  iconClass: string;
  labelClass: string;
  label: string;
  text: string;
}

const NOTES: Note[] = [
  {
    key: "contamination",
    Icon: AlertTriangle,
    iconClass: "text-warn",
    labelClass: "text-warn",
    label: "Contamination",
    text: "this model’s family seeded the ViMedCSS labels (Gemini 2.5 Pro, then human-verified at κ 0.65), so its scores carry a permanent contamination flag.",
  },
  {
    key: "referenceOnly",
    Icon: Lock,
    iconClass: "text-muted",
    labelClass: "text-text",
    label: "Reference-only",
    text: "CC-BY-NC-ND — cannot be fine-tuned or deployed commercially; shown as a yardstick.",
  },
  {
    key: "frozen",
    Icon: Snowflake,
    iconClass: "text-muted",
    labelClass: "text-text",
    label: "Frozen",
    text: "the maintaining organization has stopped updates; results are pinned to the last public checkpoint.",
  },
  {
    key: "zone1",
    Icon: ShieldCheck,
    iconClass: "text-accent",
    labelClass: "text-text",
    label: "Zone 1",
    text: "self-hostable on a single 24 GB GPU with a license clean for deployment.",
  },
];

/** Plain-language explanations for each active flag (pairs with FlagBadges icons). */
export default function FlagNotes({ flags, className }: FlagNotesProps) {
  if (!flags) return null;
  const active = NOTES.filter((n) => flags[n.key]);
  if (active.length === 0) return null;

  return (
    <ul className={clsx("flex flex-col gap-2", className)}>
      {active.map(({ key, Icon, iconClass, labelClass, label, text }) => (
        <li
          key={key}
          className="flex items-start gap-2.5 text-[13px] leading-relaxed text-muted"
        >
          <span aria-hidden className={clsx("mt-[3px] shrink-0", iconClass)}>
            <Icon size={14} />
          </span>
          <span>
            <span className={clsx("font-medium", labelClass)}>{label}</span>{" "}
            — {text}
          </span>
        </li>
      ))}
    </ul>
  );
}