// Block `grille_frictions` — réutilise le composant d'origine LogistiqueProblem
// (en-tête + grille de cartes « frictions / problèmes » avec vignette photo).
// Les champs WP non remplis retombent sur les défauts du composant (parité
// pixel préservée).

import LogistiqueProblem, {
  type LogistiqueProblemFriction,
} from "@/components/industries/LogistiqueProblem";
import { arr, mapImage } from "@/lib/wp/mappers";
import type { WpEntete, WpImageField } from "@/lib/wp/types";

export interface GrilleFrictionsBlock {
  __typename: string;
  origine?: string | null;
  entete?: WpEntete | null;
  frictionsItems?:
    | {
        image?: WpImageField | null;
        kicker?: string | null;
        titre?: string | null;
        description?: string | null;
      }[]
    | null;
}

const GrilleFrictions = (props: GrilleFrictionsBlock & { position?: number }) => {
  const frictions: LogistiqueProblemFriction[] = arr(props.frictionsItems)
    .filter((f) => f.titre)
    .map((f) => {
      const image = mapImage(f.image);
      return {
        image: image?.sourceUrl ?? "",
        imageAlt: image?.altText ?? "",
        kicker: f.kicker ?? "",
        title: f.titre ?? "",
        desc: f.description ?? "",
      };
    });

  return (
    <LogistiqueProblem
      {...(props.entete?.badge ? { badge: props.entete.badge } : {})}
      {...(props.entete?.titre ? { titre: props.entete.titre } : {})}
      {...(props.entete?.intro ? { intro: props.entete.intro } : {})}
      {...(frictions.length ? { frictions } : {})}
    />
  );
};

export default GrilleFrictions;