spb/lou-ka

1// -----------------------------------------------------------------------------2// Lou-Ka — Agrégateur de logements à louer (province de Québec)3// Auteur : Simon-Pierre Boucher — contact@spboucher.ai4// components/FairValueBadge.tsx : pastille « juste valeur » (fair value)5//   Trois états : sous le marché / dans le marché / au-dessus du marché.6//   Lisible par les daltoniens : icône + libellé, jamais la couleur seule.7// -----------------------------------------------------------------------------8const NBSP = " ";910export function fmtDeviation(dev: number | null | undefined): string | null {11  if (dev == null) return null;12  const pct = Math.round(Math.abs(dev) * 100);13  return `${dev < 0 ? "−" : "+"}${pct}${NBSP}%`;14}1516const META = {17  sous: { cls: "deal-good", icon: "▼", label: "Sous le marché" },18  marche: { cls: "deal-ok", icon: "≈", label: "Dans le marché" },19  sur: { cls: "deal-high", icon: "▲", label: "Au-dessus du marché" },20} as const;2122export default function FairValueBadge({ verdict, deviation, compact = false }: {23  verdict: "sous" | "marche" | "sur" | null | undefined;24  deviation?: number | null;25  compact?: boolean;   // version carte de liste (courte)26}) {27  if (!verdict || !(verdict in META)) return null;28  const m = META[verdict];29  const pct = fmtDeviation(deviation);30  return (31    <span className={`fv-badge ${m.cls} ${compact ? "fv-compact" : ""}`}32          title={`${m.label}${pct ? ` (${pct} vs juste valeur estimée)` : ""}`}>33      <span aria-hidden="true" className="fv-ico">{m.icon}</span>34      {compact35        ? (pct ?? m.label)36        : <>{m.label}{pct && <b className="fv-pct">{pct}</b>}</>}37    </span>38  );39}40