spb/lou-ka

1// -----------------------------------------------------------------------------2// Lou-Ka — Location court terme3// components/CtListingCard.tsx : carte d'hébergement (grille /court-terme)4// -----------------------------------------------------------------------------5import { Link } from "react-router-dom";6import { CtListing, ctSourceName, fmtNight } from "../ctapi";7import { IcoCamera } from "./Icons";8import SmartImg from "./SmartImg";910export default function CtListingCard({ l }: { l: CtListing }) {11  const img = l.images && l.images.length > 0 ? l.images[0] : null;12  const meta = [13    l.capacity ? `${l.capacity} pers.` : "",14    l.bedrooms ? `${l.bedrooms} ch.` : "",15    l.details?.spa ? "Spa" : "",16    l.details?.waterfront ? "Bord de l'eau" : "",17  ].filter(Boolean);18  return (19    <Link to={`/court-terme/${encodeURIComponent(l.uid)}`} className="card">20      <div className="card-img">21        <SmartImg src={img} width_={480} fallbackLabel={l.property_type || "Séjour"}22                  alt={l.title} loading="lazy" decoding="async" />23        {l.property_type && <span className="badge type">{l.property_type}</span>}24        {l.images.length > 1 && (25          <span className="badge right"><IcoCamera size={12} /> {l.images.length}</span>26        )}27      </div>28      <div className="card-body">29        <div className="card-price">30          {fmtNight(l.price_night, l.price_label)}31          {l.price_night != null && <small> / nuit</small>}32          {l.rating != null && (33            <span className="avail" style={{ marginLeft: "auto" }}>34              ★ {l.rating.toLocaleString("fr-CA", { maximumFractionDigits: 1 })}35              {l.reviews ? ` (${l.reviews})` : ""}36            </span>37          )}38        </div>39        <div className="card-title">{l.title}</div>40        <div className="card-meta">41          {l.city && <span>{l.city}</span>}42          {l.city && l.region && <span className="sep" />}43          {l.region && <span>{l.region}</span>}44        </div>45        <div className="card-foot">46          <span className="source-tag">{ctSourceName(l.source)}</span>47          {meta.length > 0 && <span className="avail">{meta.join(" · ")}</span>}48        </div>49      </div>50    </Link>51  );52}53