// -----------------------------------------------------------------------------
// Rent-Ka — Rental listings aggregator (Canada, outside Québec)
// Author: Simon-Pierre Boucher — contact@spboucher.ai
// components/FairValueBadge.tsx: fair-value badge
//   Three states: below market / at market / above market.
//   Colour-blind friendly: icon + label, never colour alone.
// -----------------------------------------------------------------------------
const NBSP = " ";

export function fmtDeviation(dev: number | null | undefined): string | null {
  if (dev == null) return null;
  const pct = Math.round(Math.abs(dev) * 100);
  return `${dev < 0 ? "−" : "+"}${pct}${NBSP}%`;
}

const META = {
  sous: { cls: "deal-good", icon: "▼", label: "Below market" },
  marche: { cls: "deal-ok", icon: "≈", label: "At market" },
  sur: { cls: "deal-high", icon: "▲", label: "Above market" },
} as const;

export default function FairValueBadge({ verdict, deviation, compact = false }: {
  verdict: "sous" | "marche" | "sur" | null | undefined;
  deviation?: number | null;
  compact?: boolean;   // list-card version (short)
}) {
  if (!verdict || !(verdict in META)) return null;
  const m = META[verdict];
  const pct = fmtDeviation(deviation);
  return (
    <span className={`fv-badge ${m.cls} ${compact ? "fv-compact" : ""}`}
          title={`${m.label}${pct ? ` (${pct} vs estimated fair value)` : ""}`}>
      <span aria-hidden="true" className="fv-ico">{m.icon}</span>
      {compact
        ? (pct ?? m.label)
        : <>{m.label}{pct && <b className="fv-pct">{pct}</b>}</>}
    </span>
  );
}