// 'use client';

// import { Swiper, SwiperSlide } from 'swiper/react';
// import { FreeMode } from 'swiper/modules';
// import 'swiper/css';
// import 'swiper/css/free-mode';
// import { IPostThumbResponseData } from '@/app/api/blog/data';
// import { useTranslations } from 'use-intl';
// import routeFactory from '@/assets/constants/routeFactory';
// import { TLocales } from '@/models/layout';
// import PostThumb from './PostThumb';

// interface Props {
//   posts: IPostThumbResponseData[];
//   locale: TLocales;
// }

// export default function PostsGridViewSlider({ posts, locale }: Props) {
//   const t = useTranslations();
//   const routes = routeFactory(t, locale);
//   return (
//     <div className="w-full">
//       <Swiper
//         modules={[FreeMode]}
//         freeMode
//         spaceBetween={16}
//         breakpoints={{
//           0: { slidesPerView: 1.1 },
//           768: { slidesPerView: Math.min(posts.length, 3), spaceBetween: 24 },
//         }}
//         className="w-full"
//       >
//         {posts.map((post) => (
//           <SwiperSlide key={post.id} className="w-auto">
//             <PostThumb post={post} locale={locale} />
//           </SwiperSlide>
//         ))}
//       </Swiper>
//     </div>
//   );
// }
'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 PostThumb from './PostThumb';
import { IPostThumbResponseData } from '@/app/api/blog/data';
import { TLocales } from '@/models/layout';
import { useTranslations } from 'use-intl';
import routeFactory from '@/assets/constants/routeFactory';
import SliderThumbSkeleton from '@/components/layout/sliderSkeleton';

interface Props {
  posts: IPostThumbResponseData[];
  locale: TLocales;
}

export default function PostsGridViewSlider({ posts, locale }: Props) {
  const [hasMounted, setHasMounted] = useState(false);
  const t = useTranslations();
  const routes = routeFactory(t, locale);

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

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

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