// Block `product_hero` — réutilise le composant d'origine ProductHero (héros
// bicolore : bande cream + copy à gauche, bande navy + packshot + stats à
// droite). Les champs WP non remplis retombent sur les défauts du composant
// (parité pixel préservée).

import ProductHeroComponent from "@/components/product/ProductHero";
import { arr, mapImage } from "@/lib/wp/mappers";
import type { WpCta, WpImageField } from "@/lib/wp/types";

interface ProductHeroBlock {
  __typename: string;
  origine?: string | null;
  tag?: string | null;
  productName?: string | null;
  tagline?: string | null;
  description?: string | null;
  heroImage?: WpImageField | null;
  accentColor?: string | null;
  ctaPrimaire?: WpCta | null;
  ctaSecondaire?: WpCta | null;
  productBadges?: { texte?: string | null }[] | null;
  productStats?: { value?: string | null; label?: string | null }[] | null;
}

const ProductHero = (props: ProductHeroBlock & { position?: number }) => {
  const image = mapImage(props.heroImage);

  const inlineBadges = arr(props.productBadges)
    .map((b) => b.texte)
    .filter((t): t is string => Boolean(t));

  const heroStats = arr(props.productStats)
    .filter((s) => s.value)
    .map((s) => ({ value: s.value ?? "", label: s.label ?? "" }));

  const primaryCTA =
    props.ctaPrimaire?.label && props.ctaPrimaire?.lien
      ? { label: props.ctaPrimaire.label, href: props.ctaPrimaire.lien }
      : undefined;
  const secondaryCTA =
    props.ctaSecondaire?.label && props.ctaSecondaire?.lien
      ? { label: props.ctaSecondaire.label, href: props.ctaSecondaire.lien }
      : undefined;

  return (
    <ProductHeroComponent
      tag={props.tag ?? ""}
      productName={props.productName ?? ""}
      tagline={props.tagline ?? ""}
      description={props.description ?? ""}
      heroImage={image?.sourceUrl ?? ""}
      {...(image?.altText ? { heroImageAlt: image.altText } : {})}
      {...(props.accentColor ? { accentColor: props.accentColor } : {})}
      {...(primaryCTA ? { primaryCTA } : {})}
      {...(secondaryCTA ? { secondaryCTA } : {})}
      {...(inlineBadges.length ? { inlineBadges } : {})}
      {...(heroStats.length ? { heroStats } : {})}
    />
  );
};

export default ProductHero;