// components/ProductSlider.tsx
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination, Autoplay } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/effect-fade";

import Image from "next/image";
import Button from "./common/Button";
import ArrowIcon from "./icons/ArrowIcon";
import { useLocale, useTranslations } from "next-intl";
import { Advertisement } from "../../types/advertisements";
import { mapAdsToSlides } from "@/lib/utils/mapAdsToSlides";

export default function HomeBanner({ads}: {ads: Advertisement[] | null}) {
  const t = useTranslations();
   const locale = useLocale();
  const FALLBACK_SLIDES = [
    {
      title: t("slides.title"),
      category: t("slides.category"),
      description: t("slides.description"),
      image: "/strut-image.webp",
      url: "/"
    },
    {
      title: t("slides.title2"),
      category: t("slides.category2"),
      description: t("slides.description2"),
      image: "/strut-image.webp",
      url: "/"
    },
  ];

  if(ads === null) return null;

  const slides = ads.length > 0 ? mapAdsToSlides(ads, locale as "en" | "ar",t): FALLBACK_SLIDES;

  return (
    <Swiper
      className="custom-pagenation h-full"
      modules={[Navigation, Pagination, Autoplay]}
      fadeEffect={{ crossFade: true }}
      spaceBetween={0}
      slidesPerView={1}
      pagination={{ clickable: true }}
      autoplay={{ delay: 50000 }}
      loop
      dir="ltr"
    >
      {slides.map((slide, index) => (
        <SwiperSlide key={index} className="!h-auto">
          <div className="bg-neutrals100 rounded-md py-11 px-4 md:p-8 flex flex-col md:flex-row md:items-center md:justify-between gap-4 h-full relative dark:bg-darkbg">
            <div className="md:max-w-md md:w-1/2 rtl:text-left">
              <p className="text-primary400 font-semibold text-sm mb-1 flex items-center gap-2">
                <span className="inline-block w-6 h-0.5 bg-primary400 " />
                {slide?.category}
              </p>
              <h2 className="text-[22px] md:text-3xl lg:text-5xl font-semibold text-neutrals800 max-w-52 md:max-w-96 dark:text-white max-md:max-w-full">
                {slide?.title}
              </h2>
              <p className="text-neutrals700 mt-4 text-sm leading-6 md:leading-normal md:text-base max-w-80 dark:text-neutrals400 line-clamp-3 max-md:max-w-full"
              dangerouslySetInnerHTML={{ __html: slide?.description }}/>
              <Button
                label={t("shop_now")}
                variant="secondary"
                icon={<ArrowIcon />}
                href={`${slide ? slide.url : "/"}`}
                className="mt-6 inline-flex"
              />
            </div>
            <div className="md:relative md:w-1/2 h-full pt-16">
              <span className="inline-block bg-primary400 text-white text-xs md:text-lg font-semibold px-5 py-2 rounded-full absolute top-2.5 right-4 md:top-0 md:right-0 z-10 rtl:left-4 rtl:right-auto">
                {t("slider.latest_deal")}
              </span>
              <div className="max-w-60 md:max-w-[438px] mx-auto md:ms-auto">
                <Image
                  src={slide?.image}
                  alt={slide?.title}
                  fill
                  className="object-contain !relative"
                />
              </div>
            </div>
          </div>
        </SwiperSlide>
      ))}
    </Swiper>
  );
}