"use client";

import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Autoplay } from "swiper/modules";

import "swiper/css";
import "swiper/css/navigation";

import ServiceCard from "./ServiceCard";

type FeatureItems = {
  item1?: string | null;
  item2?: string | null;
  item3?: string | null;
  item4?: string | null;
  item5?: string | null;
};

type Service = {
  serviceTitle?: string;
  serviceSubtitle?: string;
  serviceDescription?: string;
  featuresTitle?: string;
  featuresItems?: FeatureItems;
  servicePageUrl?: string | null;
};

type ServicesGridProps = {
  data: {
    services1?: Service | null;
    services2?: Service | null;
    services3?: Service | null;
    services4?: Service | null;
    services5?: Service | null;
    services6?: Service | null;
  };
};

export default function ServicesGrid({ data }: ServicesGridProps) {
  const services: Service[] = [
    data.services1,
    data.services2,
    data.services3,
    data.services4,
    data.services5,
    data.services6,
  ].filter((service): service is Service => Boolean(service));

  return (
    <section className="pb-24 bg-[#F3F3F3]">
      <div className="mx-auto px-4 relative">

        <Swiper
          modules={[Navigation, Autoplay]}
          spaceBetween={30}
          slidesPerView={4}
          loop={false}
          autoplay={{
            delay: 3500,
            disableOnInteraction: false,
            pauseOnMouseEnter: true,
          }}
          navigation={{
            nextEl: ".case-next",
            prevEl: ".case-prev",
          }}
          breakpoints={{
            0: {
              slidesPerView: 1,
            },
            768: {
              slidesPerView: 2,
            },
            1024: {
              slidesPerView: 3,
            },
            1400: {
              slidesPerView: 4,
            },
          }}
        >
          {services.map((service, index) => (
            <SwiperSlide key={index} className="h-auto flex">
              <ServiceCard service={service} />
            </SwiperSlide>
          ))}
        </Swiper>

        {/* NAVIGATION */}
        <div className="flex justify-center gap-6 mt-12">
          <button className="case-prev text-xl text-[#202020] cursor-pointer" aria-label="Previous services" title="Previous services">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="rotate-270">
              <path fill="currentColor" fillRule="evenodd" d="M11.47 2.47a.75.75 0 0 1 1.06 0l7 6.987a.75.75 0 1 1-1.06 1.061L12.751 4.81L12.762 21a.75.75 0 0 1-1.5.002l-.01-16.194l-5.722 5.711a.75.75 0 1 1-1.06-1.061z" clipRule="evenodd"/>
            </svg>
          </button>
          <button className="case-next text-xl text-[#202020] cursor-pointer" aria-label="Next services" title="Next services">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="rotate-90">
              <path fill="currentColor" fillRule="evenodd" d="M11.47 2.47a.75.75 0 0 1 1.06 0l7 6.987a.75.75 0 1 1-1.06 1.061L12.751 4.81L12.762 21a.75.75 0 0 1-1.5.002l-.01-16.194l-5.722 5.711a.75.75 0 1 1-1.06-1.061z" clipRule="evenodd"/>
            </svg>
          </button>
        </div>
      </div>
    </section>
  );
}