// -----------------------------------------------------------------------------
// Lou-Ka — Location court terme
// components/CtListingCard.tsx : carte d'hébergement (grille /court-terme)
// -----------------------------------------------------------------------------
import { Link } from "react-router-dom";
import { CtListing, ctSourceName, fmtNight } from "../ctapi";
import { IcoCamera } from "./Icons";
import SmartImg from "./SmartImg";

export default function CtListingCard({ l }: { l: CtListing }) {
  const img = l.images && l.images.length > 0 ? l.images[0] : null;
  const meta = [
    l.capacity ? `${l.capacity} pers.` : "",
    l.bedrooms ? `${l.bedrooms} ch.` : "",
    l.details?.spa ? "Spa" : "",
    l.details?.waterfront ? "Bord de l'eau" : "",
  ].filter(Boolean);
  return (
    <Link to={`/court-terme/${encodeURIComponent(l.uid)}`} className="card">
      <div className="card-img">
        <SmartImg src={img} width_={480} fallbackLabel={l.property_type || "Séjour"}
                  alt={l.title} loading="lazy" decoding="async" />
        {l.property_type && <span className="badge type">{l.property_type}</span>}
        {l.images.length > 1 && (
          <span className="badge right"><IcoCamera size={12} /> {l.images.length}</span>
        )}
      </div>
      <div className="card-body">
        <div className="card-price">
          {fmtNight(l.price_night, l.price_label)}
          {l.price_night != null && <small> / nuit</small>}
          {l.rating != null && (
            <span className="avail" style={{ marginLeft: "auto" }}>
              ★ {l.rating.toLocaleString("fr-CA", { maximumFractionDigits: 1 })}
              {l.reviews ? ` (${l.reviews})` : ""}
            </span>
          )}
        </div>
        <div className="card-title">{l.title}</div>
        <div className="card-meta">
          {l.city && <span>{l.city}</span>}
          {l.city && l.region && <span className="sep" />}
          {l.region && <span>{l.region}</span>}
        </div>
        <div className="card-foot">
          <span className="source-tag">{ctSourceName(l.source)}</span>
          {meta.length > 0 && <span className="avail">{meta.join(" · ")}</span>}
        </div>
      </div>
    </Link>
  );
}