'use client';

import { useEffect, useState } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { FreeMode } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/free-mode';

import ProjectThumb from './ProjectThumb';

import { IProjectThumbResponseData } from '@/app/api/projects/data';
import { TLocales } from '@/models/layout';
import SliderThumbSkeleton from '@/components/layout/sliderSkeleton';

interface Props {
  projects: IProjectThumbResponseData[];
  locale: TLocales;
  className?: string;
}

export default function ProjectsGridSlider({
  projects,
  locale,
  className = '',
}: Props) {
  const [hasMounted, setHasMounted] = useState(false);

  useEffect(() => {
    setHasMounted(true);
  }, []);

  if (!hasMounted) return <SliderThumbSkeleton count={3} />;

  return (
    <div className={className}>
      <Swiper
        modules={[FreeMode]}
        freeMode
        spaceBetween={16}
        breakpoints={{
          0: { slidesPerView: 1.1 },
          768: {
            slidesPerView: Math.min(projects.length, 3),
            spaceBetween: 24,
          },
        }}
        className="w-full"
      >
        {projects.map((project) => (
          <SwiperSlide key={project.id} className="w-auto">
            <ProjectThumb project={project} locale={locale} />
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
}
