// -----------------------------------------------------------------------------
// Auto-Ka — Agrégateur de voitures usagées à vendre (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// VehicleCard.tsx : carte véhicule de la grille de résultats
// -----------------------------------------------------------------------------
import { Link } from "react-router-dom";
import { Vehicle, fmtKm, fmtPrice } from "../api";

export default function VehicleCard({ v }: { v: Vehicle }) {
  const chips = [
    v.mileage_km != null ? fmtKm(v.mileage_km) : null,
    v.transmission || null,
    v.fuel || null,
    v.body_type || null,
    v.drivetrain || null,
  ].filter(Boolean) as string[];

  return (
    <Link to={`/vehicule/${encodeURIComponent(v.uid)}`} className="vcard">
      <div className="photo">
        {v.images.length > 0 ? (
          <img src={v.images[0]} alt={v.title} loading="lazy" />
        ) : (
          <div className="nopic" aria-hidden="true">🚗</div>
        )}
        {v.year != null && <span className="year-chip">{v.year}</span>}
      </div>
      <div className="body">
        <h3>{v.title}</h3>
        <div className="price">
          {fmtPrice(v.price)}
          {v.details?.price_from ? <small> à partir de</small> : null}
        </div>
        <div className="specs">
          {chips.slice(0, 4).map((c) => (
            <span key={c} className="spec-chip">{c}</span>
          ))}
        </div>
        <div className="foot">
          <span>{v.dealer_name || v.source}</span>
          <span>{v.city}</span>
        </div>
      </div>
    </Link>
  );
}