// Block `principe_cool_roof` — réutilise le composant d'origine IndustriePrinciple
// (en-tête + 2 cartes illustration 3D comparatives + bande de bénéfices + lien
// CTA). Les champs WP non remplis retombent sur les défauts du composant
// (parité pixel préservée).

import { HelpCircle } from "lucide-react";

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

const PrincipeCoolRoof = (props: PrincipeCoolRoofBlock & { position?: number }) => {
  const benefits = arr(props.principeBenefices)
    .filter((b) => b.label)
    .map((b) => ({
      icon: iconFor(b.icone) ?? HelpCircle,
      label: b.label ?? "",
    }));

  const classicImage = mapImage(props.classicImage);
  const coolImage = mapImage(props.coolImage);

  return (
    <IndustriePrinciple
      {...(props.entete?.badge ? { badge: props.entete.badge } : {})}
      {...(props.entete?.titre ? { titre: props.entete.titre } : {})}
      {...(props.entete?.intro ? { intro: props.entete.intro } : {})}
      {...(props.classicTitre ? { classicTitle: props.classicTitre } : {})}
      {...(props.classicPoint ? { classicPoint: props.classicPoint } : {})}
      {...(classicImage ? { classicImageSrc: classicImage.sourceUrl } : {})}
      {...(classicImage?.altText ? { classicImageAlt: classicImage.altText } : {})}
      {...(props.coolTitre ? { coolTitle: props.coolTitre } : {})}
      {...(props.coolPoint ? { coolPoint: props.coolPoint } : {})}
      {...(coolImage ? { coolImageSrc: coolImage.sourceUrl } : {})}
      {...(coolImage?.altText ? { coolImageAlt: coolImage.altText } : {})}
      {...(benefits.length ? { benefits } : {})}
      {...(props.ctaLabel ? { ctaLabel: props.ctaLabel } : {})}
      {...(props.ctaHref ? { ctaHref: props.ctaHref } : {})}
    />
  );
};

export default PrincipeCoolRoof;