"use client";

import { SimplePostModel } from "@/models";
import { withSlug } from "@/utils/slug";
import LocaleLink from "@/components/ui/LocaleLink";
import { Autoplay, Navigation, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import LoadingNovelSlider from "./loading/LoadingCardNovel";

interface SwiperData {
    data: SimplePostModel[];
}

export default function SwiperComponents({ data }: SwiperData) {
    return (
        <>
            {data.length > 0 && (
                <Swiper
                    modules={[Navigation, Pagination, Autoplay]}
                    autoplay={{ delay: 3000, disableOnInteraction: false }}
                    loop={true}
                    slidesPerView={3.5}
                    spaceBetween={12}
                    breakpoints={{
                        320: {
                            slidesPerView: 2.5,
                            spaceBetween: 12,
                        },
                        640: {
                            slidesPerView: 3.5,
                            spaceBetween: 12,
                        },
                        768: {
                            slidesPerView: 5,
                            spaceBetween: 12,
                        },
                        1024: {
                            slidesPerView: 6.5,
                            spaceBetween: 12,
                        },
                    }}
                >
                    {data && data.length > 0 ? (
                        data.map((post, index) => (
                            <SwiperSlide key={index}>
                                <div className="shrink-0 w-36 px-2 block">
                                    <div className="rounded-lg overflow-hidden flex flex-col text-left relative">
                                        <LocaleLink href={post?.id ? `/novel/${withSlug(post.id, post.slug)}` : "#"}>
                                            <img
                                                src={post?.image || "/images/placeholder.jpg"}
                                                alt={post?.title || "Loading..."}
                                                className="w-36 h-48 object-cover rounded-lg shadow-md shadow-[#1F1F1F29]"
                                            />
                                        </LocaleLink>
                                        <div className="py-4 text-left">
                                            <h3 className="text-xs font-semibold mb-1 text-ellipsis overflow-hidden whitespace-nowrap">
                                                <LocaleLink href={`/novel/${withSlug(post.id, post.slug)}`}>
                                                    {post?.title || "Loading..."}
                                                </LocaleLink>
                                            </h3>
                                            <p className="text-xs text-primary-500 truncate">
                                                {post?.genre?.title && (
                                                    <LocaleLink
                                                        href={`/novel?genre=${encodeURIComponent(post.genre.title)}`}
                                                        className="hover:underline"
                                                    >
                                                        {post.genre.title}
                                                    </LocaleLink>
                                                )}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </SwiperSlide>

                        ))
                    ) : (
                        <div className="flex gap-6 overflow-x-auto flex-nowrap">
                            {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((item) => (
                                <LoadingNovelSlider key={item} />
                            ))}
                        </div>

                    )}
                </Swiper>
            )}
        </>
    );
}