// Block `cool_roof_explainer` — réutilise le composant d'origine
// CoolRoofExplainerSection (illustration + titre + paragraphe + légende + CTA).
// Les champs WP non remplis retombent sur les défauts du composant (parité
// pixel préservée).

import CoolRoofExplainerSection from "@/components/CoolRoofExplainerSection";
import { sanitizeWpHtml } from "@/lib/sanitizeHtml";
import { mapImage } from "@/lib/wp/mappers";
import type { CoolRoofExplainerBlock } from "@/lib/wp/types";

const CoolRoofExplainer = (props: CoolRoofExplainerBlock & { position?: number }) => {
  const image = mapImage(props.image);

  return (
    <CoolRoofExplainerSection
      {...(props.titre ? { titre: props.titre } : {})}
      {...(props.paragraphe
        ? { paragraphe: <span dangerouslySetInnerHTML={{ __html: sanitizeWpHtml(props.paragraphe) }} /> }
        : {})}
      {...(image?.sourceUrl ? { imageSrc: image.sourceUrl } : {})}
      {...(image?.altText ? { imageAlt: image.altText } : {})}
      {...(props.note ? { note: props.note } : {})}
      {...(props.cta?.label ? { ctaLabel: props.cta.label } : {})}
      {...(props.cta?.lien ? { ctaHref: props.cta.lien } : {})}
    />
  );
};

export default CoolRoofExplainer;