"use client"

/**
 * Pictogramme d'un produit fini, dessiné au trait.
 *
 * Chaque produit est figuré par son usage, comme sur la page Activités : la
 * bouteille pour le butane, le pistolet de pompe pour l'essence, la pirogue,
 * l'avion, la lampe-tempête, le camion, l'usine. C'est l'objet du quotidien qui
 * sert de repère, pas un symbole abstrait.
 *
 * Le rapprochement se fait sur le nom du produit et non sur son rang : la liste
 * est saisie dans les traductions, la communication peut donc la réordonner ou
 * la traduire sans que les dessins se décalent. Un produit inconnu reçoit la
 * goutte, neutre.
 */

/** Enlève les accents et met en bas de casse, pour comparer sans surprise. */
const normaliser = (texte: string) =>
  texte.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase()

/** L'ordre compte : « Essence Pirogue » contient aussi « essence », et
 *  « Pétrole lampant » contient « petrol ». Le motif le plus spécifique
 *  d'abord. */
const DESSINS: { motif: RegExp; tracé: React.ReactNode }[] = [
  {
    // Butane : la bouteille de gaz
    motif: /butane|gaz|cylinder/,
    tracé: (
      <>
        <path d="M10 2.5h4v2.5h-4z" />
        <path d="M8 9.5a4 4 0 0 1 8 0V20a1.5 1.5 0 0 1-1.5 1.5h-5A1.5 1.5 0 0 1 8 20z" />
        <path d="M8 13.5h8" />
      </>
    ),
  },
  {
    // Essence Pirogue : la coque et son moteur hors-bord
    motif: /pirogue/,
    tracé: (
      <>
        <path d="M2.5 15.5h17l-2 4h-13z" />
        <path d="M16.5 15.5V10h2.5v5.5" />
        <path d="M8 15.5V11h6" />
      </>
    ),
  },
  {
    // Kérosène : l'avion
    motif: /kerosene|jet/,
    tracé: <path d="M12 2.5c.9 0 1.4.9 1.4 2.3v4.4l7.1 4v2l-7.1-2v4l2 1.4v1.6l-3.4-1-3.4 1v-1.6l2-1.4v-4l-7.1 2v-2l7.1-4V4.8c0-1.4.5-2.3 1.4-2.3z" />,
  },
  {
    // Pétrole lampant : la lampe-tempête
    motif: /lampant|lamp|lantern/,
    tracé: (
      <>
        <path d="M9 4.5h6" />
        <path d="M12 4.5v3" />
        <path d="M9.5 7.5h5v2h-5z" />
        <path d="M8.5 9.5h7l1 8h-9z" />
        <path d="M9.5 17.5v2.5h5v-2.5" />
      </>
    ),
  },
  {
    // Gasoil et Diesel : le camion
    motif: /gasoil|diesel/,
    tracé: (
      <>
        <path d="M2.5 17.5V6.5h10.5v11" />
        <path d="M13 10h4l3.5 4v3.5h-7.5" />
        <circle cx="7" cy="18.5" r="1.8" />
        <circle cx="17" cy="18.5" r="1.8" />
      </>
    ),
  },
  {
    // Fuel Oil : l'usine et sa cheminée
    motif: /fuel/,
    tracé: (
      <>
        <path d="M2.5 20.5v-8l5 3v-3l5 3v-3l4 2.4" />
        <path d="M17.5 20.5V5.5h4v15" />
        <path d="M2.5 20.5h19" />
      </>
    ),
  },
  {
    // Essences : le pistolet de la pompe
    motif: /essence|petrol|gasoline|super/,
    tracé: (
      <>
        <path d="M5.5 20.5V6.5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v14" />
        <path d="M4.5 20.5h10" />
        <path d="M5.5 10.5h8" />
        <path d="M13.5 8.5h3a2 2 0 0 1 2 2v5.5a1.5 1.5 0 0 1-3 0V13h-2" />
      </>
    ),
  },
]

/** La goutte, pour un produit qu'aucun motif ne reconnaît. */
const GOUTTE = <path d="M12 3s6 6.4 6 10.3a6 6 0 0 1-12 0C6 9.4 12 3 12 3z" />

export default function PictoProduit({
  nom,
  className = "",
}: {
  nom: string
  className?: string
}) {
  const cle = normaliser(nom)
  const dessin = DESSINS.find((d) => d.motif.test(cle))

  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.6"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden
      className={className}
    >
      {dessin ? dessin.tracé : GOUTTE}
    </svg>
  )
}