import React from "react";

interface whyChooseDataProps{
  whyChooseData:{
    title: string;
    desc: string;
  }[]
}

function WhyChooseAleantz({whyChooseData} : whyChooseDataProps) {
  return (
    <div className="flex flex-wrap justify-center gap-y-4 md:gap-y-8 mt-8 md:mt-10">
      {whyChooseData.map((item, i) => {
        return (
          <div
            key={i}
            className="w-full md:w-[50%] md:px-4"
            data-aos="fade-up"
            data-aos-anchor-placement="top-bottom"
            data-aos-duration={1000 + i * 100}
          >
            <div className="bg-white stat-box border-2 border-transparent h-full rounded-2xl px-4 py-3 md:py-4 md:px-6">
              <h3 className="text-[20px] font-bold">{item.title}</h3>
              <p className="text-gray-700 text-[14px]">{item.desc}</p>
            </div>
          </div>
        );
      })}
    </div>
  );
}

export default WhyChooseAleantz;