// -----------------------------------------------------------------------------
// Food-Ka — Agrégateur de produits d'épicerie (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// components/ProductCard.tsx : carte produit (grille de résultats)
//   Prix courant + prix régulier barré et badge « -XX % » quand en solde,
//   prix unitaire comparable, bannière d'origine.
// -----------------------------------------------------------------------------
import { Link } from "react-router-dom";
import { Product, discountPct, fmtPrice } from "../api";
import SourceLogo from "./SourceLogo";

export default function ProductCard({ p }: { p: Product }) {
  const img = p.images && p.images.length > 0 ? p.images[0] : null;
  const pct = discountPct(p);
  return (
    <Link to={`/produit/${encodeURIComponent(p.uid)}`} className="card">
      <div className="card-img packshot">
        {img ? (
          <img src={img} alt={p.name} loading="lazy" />
        ) : (
          <div className="noimg">🛒</div>
        )}
        {p.on_sale && (
          <span className="badge sale">{pct != null ? `−${pct} %` : "En solde"}</span>
        )}
        {p.in_stock === false && <span className="badge right">Rupture</span>}
      </div>
      <div className="card-body">
        <div className="card-price">
          {fmtPrice(p.price, p.price_label)}
          {p.on_sale && p.regular_price != null && (
            <s className="price-old">{fmtPrice(p.regular_price)}</s>
          )}
        </div>
        {p.unit_price_label && (
          <div className="card-unit">{p.unit_price_label}</div>
        )}
        <div className="card-title">{p.name}</div>
        <div className="card-meta">
          {p.brand && <span>{p.brand}</span>}
          {p.brand && p.size_label && <span className="sep" />}
          {p.size_label && <span>{p.size_label}</span>}
        </div>
        <div className="card-foot">
          <SourceLogo source={p.source} size={20} name="short" />
          {p.category && <span className="avail">{p.category}</span>}
        </div>
      </div>
    </Link>
  );
}