// -----------------------------------------------------------------------------
// Rent-Ka — Rental listings aggregator (Canada, outside Québec)
// Author: Simon-Pierre Boucher — contact@spboucher.ai
// components/SmartImg.tsx: robust image — optimized WebP thumbnail first,
//   fallback to the original URL if the thumbnail is not (yet) available,
//   then to the Rent-Ka fallback visual. Never a broken-image icon.
// -----------------------------------------------------------------------------
import { ImgHTMLAttributes, useEffect, useState } from "react";
import { placeholderImage, thumb } from "../api";

type Props = Omit<ImgHTMLAttributes<HTMLImageElement>, "src"> & {
  src: string | null | undefined;   // original source URL
  width_?: 160 | 480 | 800 | 1280;  // desired thumbnail width
  fallbackLabel?: string;           // fallback visual label (e.g. "2 bedrooms")
  original?: boolean;               // true = no thumbnail (full size)
};

export default function SmartImg({ src, width_ = 480, fallbackLabel,
                                   original = false, ...rest }: Props) {
  const chain = src
    ? (original ? [src] : [thumb(src, width_), src])
    : [];
  const [step, setStep] = useState(0);
  useEffect(() => { setStep(0); }, [src, width_]);
  const url = step < chain.length ? chain[step] : placeholderImage(fallbackLabel);
  return (
    <img
      {...rest}
      src={url}
      onError={() => setStep((s) => s + 1)}
    />
  );
}