import GeneralSlider from "@/components/UiComponents/CarouselSwiper/GeneralSlider";
import React from "react";
import ImageWithFallback from "@/components/UiComponents/ImageWithFallback";
import { useTranslations } from "next-intl";

const HeroSec = ({ sliders }: { sliders: any[] }) => {
  const t = useTranslations();
  return (
    sliders?.length ? (
      <section className="hero-section bg-white">
        <GeneralSlider
          extraSettings={{ spaceBetween: 10 }}
          withPagination
          hideArrows
          className="hero-slider container"
        >
          {sliders.map((item, index) => {
            return (
              <div
                key={`hero_${index}`}
                className="hero-bg relative flex items-center lg:w-full text-white justify-between 
                min-h-[200px] lg:h-[390px] rounded-xl overflow-hidden bg-primary lg:px-8 px-3 lg:py-16 py-6"
              >
                <div className="absolute flex bottom-0 lg:bottom-10 font-extrabold start-0 lg:-start-12 text-[120px] lg:text-[270px] z-0 bg-transparent items-end justify-end leading-[1] text-[#ffffff17]">
                  {item?.discount}%
                </div>

                <div className="flex flex-col justify-center gap-2">
                  <p className="text-sm font-medium text-start leading-6 lg:mb-3 mb-1 bg-[#ffffff42] w-fit rounded-full px-4 py-2">
                    {/* Optional: Format date or discount info */}
                    {t("Text.home_discount")} {item?.discount}%
                  </p>

                  <div className="flex flex-col lg:gap-5 gap-2">
                    <h1 className="xl:text-5xl lg:text-3xl text-lg lg:leading-10 leading-6 text-start font-bold" >
                      {item?.title}
                    </h1>
                    <p className="md:text-2xl text-sm lg:leading-10 leading-6 text-start font-medium" >
                      {item?.description}
                    </p>
                  </div>
                </div>

                <div className="absolute lg:inline-block hidden top-0 end-0  opacity-25 w-[345px] h-full rounded-full"></div>
                  <ImageWithFallback
                    src={item?.image || ""}
                    width={200}
                    height={200}
                    className="md:w-[410px] size-[130px] md:h-[324px] lg:mx-0 mx-auto object-cover"
                    alt={item?.title || "hero"}
                  />
              </div>
            );
          })}
        </GeneralSlider>
      </section>
    ) : null
  );
};

export default HeroSec;