// Block `barre_reassurance` — design repris de src/components/ReassuranceBar.tsx
// (bande sombre, items séparés par une bordure verticale). Les items WP
// n'ayant que du texte, l'icône est un check uniforme.

import { Check } from "lucide-react";
import { arr } from "@/lib/wp/mappers";
import type { BarreReassuranceBlock } from "@/lib/wp/types";

const BarreReassurance = (props: BarreReassuranceBlock & { position?: number }) => {
  const items = arr(props.items).filter((i) => i.texte);
  if (!items.length) return null;

  return (
    <section className="bg-foreground py-3.5 border-b border-white/10">
      <div className="container mx-auto px-4">
        <div className="flex flex-wrap justify-center gap-0">
          {items.map((item, i) => (
            <div
              key={i}
              className={`flex items-center gap-2 px-4 lg:px-6 py-1 ${
                i < items.length - 1 ? "border-r border-white/15" : ""
              }`}
            >
              <Check className="w-4 h-4 text-primary flex-shrink-0" strokeWidth={2.5} />
              <span className="text-xs lg:text-sm font-semibold text-white whitespace-nowrap">
                {item.texte}
              </span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default BarreReassurance;