// -----------------------------------------------------------------------------
// Immo-Ka — Agrégateur de propriétés à vendre (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// components/PropertyImg.tsx : image de propriété robuste
//   · <TypeFallback/> : image de secours élégante PAR TYPE DE BIEN aux couleurs
//     Immo-Ka — jamais d'icône d'image cassée ni de vide gris.
//   · <PropertyImg/> : <img> avec repli automatique si l'URL ne charge pas.
// -----------------------------------------------------------------------------
import { useState } from "react";
import { Ico } from "./Icons";

const TYPE_ICONS: Record<string, string> = {
  "Maison": "home", "Maison mobile": "home", "Maison de ville": "home",
  "Jumelé": "home", "Chalet": "tree", "Condo": "building",
  "Duplex": "building", "Triplex": "building", "Multiplex": "building",
  "Terrain": "land", "Fermette/Agricole": "leaf", "Commercial": "cart",
};

/** Image de secours par type de bien (gradient cerise + icône + libellé). */
export function TypeFallback({ type, label = true }: { type?: string; label?: boolean }) {
  const ico = TYPE_ICONS[type ?? ""] ?? "home";
  return (
    <div className="type-fallback" aria-label={type || "Propriété"}>
      <Ico name={ico} size={40} />
      {label && <span>{type || "Photos à venir"}</span>}
    </div>
  );
}

/** <img> qui bascule sur l'image de secours du type si le chargement échoue. */
export default function PropertyImg({
  src, alt, type, eager = false,
}: { src?: string | null; alt: string; type?: string; eager?: boolean }) {
  const [broken, setBroken] = useState(false);
  if (!src || broken) return <TypeFallback type={type} />;
  return (
    <img
      src={src}
      alt={alt}
      loading={eager ? "eager" : "lazy"}
      decoding="async"
      onError={() => setBroken(true)}
    />
  );
}