// Block `rse_section` — réutilise le composant d'origine RSESection (carte
// engagement RSE : badge + titre + liste de certifications/garanties à icônes +
// photo). Les champs WP non remplis retombent sur les défauts du composant
// (parité pixel préservée).

import { HelpCircle } from "lucide-react";

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

export interface RseSectionBlock {
  __typename: string;
  origine?: string | null;
  badge?: string | null;
  titre?: string | null;
  rseItems?:
    | { icone?: string | null; titre?: string | null; texte?: string | null }[]
    | null;
  image?: WpImageField | null;
}

const RseSection = (props: RseSectionBlock & { position?: number }) => {
  const items = arr(props.rseItems)
    .filter((i) => i.titre)
    .map((i) => ({
      icon: iconFor(i.icone) ?? HelpCircle,
      title: i.titre ?? "",
      text: i.texte ?? "",
    }));

  const image = mapImage(props.image);

  return (
    <RSESection
      {...(props.badge ? { badge: props.badge } : {})}
      {...(props.titre ? { titre: props.titre } : {})}
      {...(items.length ? { items } : {})}
      {...(image ? { imageSrc: image.sourceUrl } : {})}
      {...(image?.altText ? { imageAlt: image.altText } : {})}
    />
  );
};

export default RseSection;