// Block `duel_comparatif` — réutilise le composant d'origine DistributionSolution
// (en-tête + 2 cartes comparatives toiture classique vs cool roof + bande de
// key-points à icônes + phrase de transition). Les champs WP non remplis
// retombent sur les défauts du composant (parité pixel préservée).

import { HelpCircle } from "lucide-react";

import DistributionSolution, {
  type DistributionSolutionComparison,
  type DistributionSolutionKeyPoint,
} from "@/components/industries/DistributionSolution";
import { arr, mapImage } from "@/lib/wp/mappers";
import type { WpEntete, WpImageField } from "@/lib/wp/types";
import { iconFor } from "./shared";

export interface DuelComparatifBlock {
  __typename: string;
  origine?: string | null;
  entete?: WpEntete | null;
  duelCartes?:
    | {
        titre?: string | null;
        label?: string | null;
        tone?: string | null;
        image?: WpImageField | null;
        metric?: string | null;
        metricLabel?: string | null;
        duelCartesArguments?: { texte?: string | null }[] | null;
      }[]
    | null;
  duelPointsCles?: { icone?: string | null; label?: string | null }[] | null;
  transition?: string | null;
}

const DuelComparatif = (props: DuelComparatifBlock & { position?: number }) => {
  const comparisons: DistributionSolutionComparison[] = arr(props.duelCartes)
    .filter((c) => c.titre)
    .map((c) => {
      const image = mapImage(c.image);
      return {
        title: c.titre ?? "",
        label: c.label ?? "",
        image: image?.sourceUrl ?? "",
        alt: image?.altText ?? c.titre ?? "",
        tone: c.tone ?? "warm",
        metric: c.metric ?? "",
        metricLabel: c.metricLabel ?? "",
        points: arr(c.duelCartesArguments)
          .map((a) => a.texte ?? "")
          .filter(Boolean),
      };
    });

  const keyPoints: DistributionSolutionKeyPoint[] = arr(props.duelPointsCles)
    .filter((p) => p.label)
    .map((p) => ({
      icon: iconFor(p.icone) ?? HelpCircle,
      label: p.label ?? "",
    }));

  return (
    <DistributionSolution
      {...(props.entete?.badge ? { badge: props.entete.badge } : {})}
      {...(props.entete?.titre ? { titre: props.entete.titre } : {})}
      {...(props.entete?.intro ? { intro: props.entete.intro } : {})}
      {...(comparisons.length ? { comparisons } : {})}
      {...(keyPoints.length ? { keyPoints } : {})}
      {...(props.transition ? { transition: props.transition } : {})}
    />
  );
};

export default DuelComparatif;