import React from "react";
import Image from "next/image";
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 Button from "./Button";
import ArrowIcon from "../icons/ArrowIcon";

export default function SmallAdvertisements({
  slides,
}: {
  slides: {
    id: string;
    category: string;
    title: string;
    subtitle: string;
    description: string;
    buttonLabel: string;
    image: string;
    url: string;
  }[];
}) {
  return (
      <Swiper
        className="custom-pagination custom-pagination-top w-full h-full"
        modules={[Pagination, Autoplay]}
        spaceBetween={0}
        slidesPerView={1}
        pagination={{ clickable: true }}
        autoplay={{ delay: 50000 }}
        loop
        dir="ltr"
      >
        {slides.map((ad: any) => (
          <SwiperSlide key={ad.id} className="!h-full">
            <div className="bg-primary800 h-full text-white rounded-md p-5 flex flex-col gap-6 sm:gap-0 sm:flex-row sm:items-center sm:justify-between w-full xl:w-full max-lg:pb-10 max-md:min-h-[220px]">
              <div className="w-full rtl:text-left space-y-3">
                <p className="text-xs uppercase tracking-wide text-primary100 mb-1 line-clamp-1">
                  {ad.title}
                </p>

                <h3
                  className="text-lg md:text-2xl font-semibold line-clamp-3"
                  dangerouslySetInnerHTML={{ __html: ad?.description }}
                />
                <div className="relative self-end w-full">
                  <Image
                    src={ad.image}
                    alt={ad.title}
                    width={407}
                    height={127}
                    className="object-contain rounded-md"
                    priority
                  />
                </div>
                <Button
                  label={ad.buttonLabel}
                  variant="primary"
                  href={ad.url}
                  icon={<ArrowIcon />}
                  className="mt-5 inline-flex"
                />
              </div>

            </div>
          </SwiperSlide>
        ))}
      </Swiper>
  );
}