const defaultOutlets: { name: string; logo: string; url?: string }[] = [
  { name: 'Le Parisien', logo: '/logos-press/le-parisien.svg' },
  { name: 'Le Figaro', logo: '/logos-press/le-figaro.svg' },
  { name: 'Le Moniteur', logo: '/logos-press/le-moniteur.svg' },
  { name: 'France Bleu', logo: '/logos-press/france-bleu.svg' },
  { name: 'La République du Centre', logo: '/logos-press/la-republique-du-centre.svg' },
  { name: 'La Maison Écologique', logo: '/logos-press/la-maison-ecologique.svg', url: 'https://lamaisonecologique.com/articles/peindre-son-toit-en-blanc-vraie-arme-anti-chaleur-ou-chou-blanc' },
  { name: 'AQC', logo: '/logos-press/aqc.svg', url: 'https://qualiteconstruction.com/ressource/batiment/toitures-cool-roofing-technique-seduisante-manier-avec-precaution/' },
  { name: 'Environnement Magazine', logo: '/logos-press/environnement-magazine.png' },
  { name: 'ZePros Bati', logo: '/logos-press/zepros.svg' },
];

interface PressSectionProps {
  label?: string;
  outlets?: { name: string; logo: string; url?: string }[];
}

const PressSection = ({
  label = 'Ils parlent de nous',
  outlets = defaultOutlets,
}: PressSectionProps = {}) => (
  <section className="bg-cream py-16 border-t border-border/40">
    <div className="container mx-auto px-4 lg:px-8">
      <p className="text-[10px] uppercase tracking-[0.25em] font-semibold text-foreground/30 font-body text-center mb-10">
        {label}
      </p>

      <div className="flex flex-wrap items-center justify-center gap-x-8 gap-y-6 lg:gap-x-12 lg:gap-y-8 max-w-5xl mx-auto">
        {outlets.map((outlet) => {
          const img = (
            <img
              src={outlet.logo}
              alt={outlet.name}
              title={outlet.name}
              className="h-7 lg:h-8 w-auto object-contain"
              loading="lazy"
            />
          );
          return outlet.url ? (
            <a
              key={outlet.name}
              href={outlet.url}
              target="_blank"
              rel="noopener noreferrer"
              className="block"
            >
              {img}
            </a>
          ) : (
            <div key={outlet.name}>{img}</div>
          );
        })}
      </div>
    </div>
  </section>
);

export default PressSection;