"use client";
import { Autoplay, Navigation } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import Project from "@components/Project";
import RightArrow from "@svg/RightArrow";
import LeftArrow from "@svg/LeftArrow";

const Projects = ({ homeProjects }: any) => {
  const defaultAltText = "Image Description";

  return (
    <div className="projects-carousel-section">
      <div className="projects-carousel-button-prev">
        <LeftArrow />
      </div>
      <div className="content-fluid">
        <Swiper
          className="projects-carousel"
          initialSlide={2}
          modules={[Autoplay, Navigation]}
          autoplay={{
            delay: 2000,
            disableOnInteraction: true,
          }}
          loop={true}
          spaceBetween={50}
          slidesPerView={1}
          navigation={{
            nextEl: ".projects-carousel-button-next",
            prevEl: ".projects-carousel-button-prev",
          }}
          breakpoints={{
            640: {
              slidesPerView: 2,
            },
            768: {
              slidesPerView: 3,
            },
            1024: {
              slidesPerView: 4,
            },
          }}
        >
          {homeProjects.map((project: any, index: number) => {
            if (index % 2 === 0) {
              const nextProject = homeProjects[index + 1];

              return (
                <SwiperSlide key={index}>
                  <div className="grid grid-rows-2 grid-flow-col gap-x-0 gap-y-10">
                    <Project
                      title={project.title && project.title}
                      defaultAltText={
                        project.imageDescription || defaultAltText
                      }
                      href={project.slug && `/project/${project.slug}`}
                      color={project.color && project.color}
                      src={project.image && project.image}
                    />
                    {nextProject && (
                      <Project
                        title={nextProject.title && nextProject.title}
                        defaultAltText={
                          nextProject.imageDescription || defaultAltText
                        }
                        href={
                          nextProject.slug && `/project/${nextProject.slug}`
                        }
                        color={nextProject.color && nextProject.color}
                        src={nextProject.image && nextProject.image}
                      />
                    )}
                  </div>
                </SwiperSlide>
              );
            } else {
              return null;
            }
          })}
        </Swiper>
      </div>
      <div className="projects-carousel-button-next">
        <RightArrow />
      </div>
    </div>
  );
};

export default Projects;