// Block `produit_showcase` — réutilise le composant d'origine ProductShowcase
// (bande navy + toggle de variantes en pills + carte packshot). Les champs WP
// non remplis retombent sur les défauts du composant (parité pixel préservée).

import ProductShowcase, {
  type VariantWithAlt,
} from "@/components/product/ProductShowcase";
import { arr, mapImage } from "@/lib/wp/mappers";
import type { WpEntete, WpImageField } from "@/lib/wp/types";

export interface ProduitShowcaseBlock {
  __typename: string;
  origine?: string | null;
  entete?: WpEntete | null;
  showcaseVariantes?:
    | {
        nom?: string | null;
        usage?: string | null;
        description?: string | null;
        image?: WpImageField | null;
      }[]
    | null;
  note?: string | null;
}

const ProduitShowcase = (props: ProduitShowcaseBlock & { position?: number }) => {
  const variants: VariantWithAlt[] = arr(props.showcaseVariantes)
    .filter((v) => v.nom)
    .map((v, i) => {
      const image = mapImage(v.image);
      return {
        id: `variante-${i}`,
        name: v.nom ?? "",
        tagline: v.usage ?? "",
        description: v.description ?? "",
        img: image?.sourceUrl ?? "",
        ...(image?.width ? { imgWidth: image.width } : {}),
        ...(image?.height ? { imgHeight: image.height } : {}),
        alt: image?.altText ?? v.nom ?? "",
        cta: { label: "Demander un devis", href: "/diagnostic" },
      };
    });

  return (
    <ProductShowcase
      {...(props.entete?.badge ? { badge: props.entete.badge } : {})}
      {...(props.entete?.titre ? { titre: props.entete.titre } : {})}
      {...(props.entete?.intro ? { intro: props.entete.intro } : {})}
      {...(variants.length ? { variants } : {})}
      {...(props.note ? { note: props.note } : {})}
    />
  );
};

export default ProduitShowcase;