import React from 'react';
import { Link } from 'react-router-dom';

const IniciativaRow = ({ iniciativa, reverse }) => {
  return (
    <div className={`flex flex-col gap-10 md:gap-16 items-center py-16 ${reverse ? 'md:flex-row-reverse' : 'md:flex-row'}`}>
      
      <div className="flex-1 flex flex-col items-start gap-4">
        <h2 className="text-[40px] leading-[48px] font-bold text-[#201D1E] font-['Barlow_Semi_Condensed']">
          {iniciativa.titulo}
        </h2>
        
        <div className="w-[79px] h-2 bg-[#F90527] rounded-full" />
        
        <p className="text-2xl font-semibold text-[#201D1E] font-['Lato'] leading-tight mt-2">
          {iniciativa.descricaoResumida}
        </p>

        {/* Link para a página dedicada */}
        <Link 
          to={`/iniciativas/${iniciativa.id}`}
          className="mt-6 px-8 py-3 bg-[#F90527] rounded-2xl text-white font-bold text-xl hover:bg-red-700 transition-colors font-['Barlow_Semi_Condensed']"
        >
          Conheça a iniciativa
        </Link>
      </div>

      <div className="flex-1 flex justify-center items-center w-full">
        <div className="relative w-full max-w-[560px] aspect-square overflow-hidden flex items-center justify-center">
           <img src={iniciativa.cover} alt={iniciativa.titulo} className="w-full h-full object-contain" />
        </div>
      </div>

    </div>
  );
};

const IniciativasList = ({ iniciativas }) => {
  return (
    <section className="w-full bg-white py-10 px-6 md:px-20 lg:px-[120px] flex flex-col gap-8">
      {iniciativas.map((iniciativa, index) => (
        <IniciativaRow 
          key={iniciativa.id}
          iniciativa={iniciativa}
          reverse={index % 2 !== 0} // Inverte se for ímpar (1, 3, 5...)
        />
      ))}
    </section>
  );
};

export default IniciativasList;