// -----------------------------------------------------------------------------
// Home-Ka — US real-estate aggregator (Groupe KA)
// Author: Simon-Pierre Boucher — contact@spboucher.ai
// components/PropertyImg.tsx : robust property image
//   · <TypeFallback/> : elegant PER-PROPERTY-TYPE fallback in Home-Ka colors —
//     never a broken-image icon or a gray void.
//   · <PropertyImg/> : <img> with automatic fallback if the URL fails to load.
// -----------------------------------------------------------------------------
import { useState } from "react";
import { Ico } from "./Icons";

const TYPE_ICONS: Record<string, string> = {
  "Single Family": "home", "Single-Family": "home", "House": "home",
  "Townhouse": "home", "Mobile Home": "home", "Manufactured": "home",
  "Cabin": "tree", "Condo": "building", "Condominium": "building",
  "Apartment": "building", "Multi-Family": "building", "Duplex": "building",
  "Triplex": "building", "Land": "land", "Lot": "land", "Farm": "leaf",
  "Ranch": "leaf", "Commercial": "cart",
};

/** Fallback image per property type (green gradient + icon + label). */
export function TypeFallback({ type, label = true }: { type?: string; label?: boolean }) {
  const ico = TYPE_ICONS[type ?? ""] ?? "home";
  return (
    <div className="type-fallback" aria-label={type || "Property"}>
      <Ico name={ico} size={40} />
      {label && <span>{type || "Photos coming soon"}</span>}
    </div>
  );
}

/** <img> that switches to the type fallback if loading fails. */
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)}
    />
  );
}