// Block `benefices_mesurables` — réutilise le composant d'origine IndustrieBenefits
// (en-tête + grande métrique + grille de bénéfices). Les champs WP non remplis
// retombent sur les défauts du composant (parité pixel préservée).

import { HelpCircle } from "lucide-react";

import IndustrieBenefits from "@/components/industrie/IndustrieBenefits";
import { arr } from "@/lib/wp/mappers";
import type { BeneficesMesurablesBlock } from "@/lib/wp/types";
import { iconFor } from "./shared";

const BeneficesMesurables = (props: BeneficesMesurablesBlock & { position?: number }) => {
  const benefits = arr(props.benefices)
    .filter((b) => b.titre)
    .map((b) => ({
      icon: iconFor(b.icone) ?? HelpCircle,
      title: b.titre ?? "",
      desc: b.description ?? "",
    }));

  return (
    <IndustrieBenefits
      {...(props.entete?.badge ? { badge: props.entete.badge } : {})}
      {...(props.entete?.titre ? { titre: props.entete.titre } : {})}
      {...(props.entete?.intro ? { intro: props.entete.intro } : {})}
      {...(props.sublabel ? { sublabel: props.sublabel } : {})}
      {...(props.metricMain ? { metricMain: props.metricMain } : {})}
      {...(props.metricSuffix ? { metricSuffix: props.metricSuffix } : {})}
      {...(props.metricLabel ? { metricLabel: props.metricLabel } : {})}
      {...(benefits.length ? { benefits } : {})}
    />
  );
};

export default BeneficesMesurables;