// Block `preuve_chiffres` — réutilise le composant d'origine IndustrieProof
// (en-tête + 3 stat-cards navy + bande de logos). Les champs WP non remplis
// retombent sur les défauts du composant (parité pixel préservée).

import { TrendingDown } from "lucide-react";

import IndustrieProof from "@/components/industrie/IndustrieProof";
import { arr, mapImage } from "@/lib/wp/mappers";
import type { PreuveChiffresBlock } from "@/lib/wp/types";
import { iconFor } from "./shared";

const PreuveChiffres = (props: PreuveChiffresBlock & { position?: number }) => {
  const figures = arr(props.chiffres)
    .filter((c) => c.valeur)
    .map((c) => ({
      icon: iconFor(c.icone) ?? TrendingDown,
      value: c.valeur ?? "",
      label: c.libelle ?? "",
    }));

  const industrialLogos = arr(props.refLogos)
    .map((l) => ({ image: mapImage(l.image), nom: l.nom ?? "" }))
    .filter((l) => l.image)
    .map((l) => ({ name: l.image!.altText || l.nom, url: l.image!.sourceUrl }));

  return (
    <IndustrieProof
      {...(props.entete?.badge ? { badge: props.entete.badge } : {})}
      {...(props.entete?.titre ? { titre: props.entete.titre } : {})}
      {...(props.entete?.intro ? { intro: props.entete.intro } : {})}
      {...(figures.length ? { figures } : {})}
      {...(props.refTitre ? { refTitle: props.refTitre } : {})}
      {...(props.refIntro ? { refIntro: props.refIntro } : {})}
      {...(props.logosTitre ? { logosTitle: props.logosTitre } : {})}
      {...(industrialLogos.length ? { industrialLogos } : {})}
    />
  );
};

export default PreuveChiffres;