import React from "react";
import Container from "../shared/container";
import { getHomeWhyChooseUsData } from "@/lib/serverActions";
import MyCounter from "./MyCounter/MyCounter";


const WhyUs = async ({ locale }: { locale: any }) => {
  const data = await getHomeWhyChooseUsData(locale);
  if (!(data?.data?.data?.length > 0)) {
    return null;
  }
  return (
    <Container>
      <div
        className="flex flex-col gap-8"
        data-aos="fade-up"
        data-aos-delay={100}
        data-aos-duration="800"
      >
        <h6 className="text-[32px] text-center lg:text-start">
          {data?.data?.header?.title}
        </h6>

        <div className="grid grid-cols-12 gap-5">
          {data?.data?.data.map((item: any, index: any) => (
            <>
               <div
                key={index}
                className="col-span-12 lg:col-span-4 flex flex-col gap-[48px] transition-transform duration-300 hover:scale-105"
              >
                <div className="flex flex-col text-center lg:text-start gap-4">
                  <h6 className="text-[24px] text-primary">
                    +<MyCounter number={item?.number} duration={2} /> {item?.title}
                  </h6>
                  <span className="h-[2px] bg-whybg w-full lg:w-[80%] transition-all duration-2000 hover:w-full animate-pulse"></span>
                  <p className="text-[20px] text-paragText">
                    {item?.description}{" "}
                  </p>
                </div>
              </div>
            </>
          ))}
        </div>
      </div>
    </Container>
  );
};

export default WhyUs;