"use client"
import { useState } from "react";
import { ProductM } from '@shared/interfaces'
import SeriItem from "./SeriItem";

const ITEMS_PER_PAGE = 10; // Sayfa başına kaç ürün gösterileceğini belirle

const SeriList = ({ cocuks, data }: { cocuks: ProductM[]; data: any }) => {
    const [currentPage, setCurrentPage] = useState(1);

    // Toplam sayfa sayısını hesapla
    const totalPages = Math.ceil(cocuks.length / ITEMS_PER_PAGE);

    // Gösterilecek ürünleri belirle
    const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
    const displayedItems = cocuks.slice(startIndex, startIndex + ITEMS_PER_PAGE);

    return (
        <div className="py-8">
            <h4 className="heading mb-4">{data.name} Modelleri</h4>

            {displayedItems.map((item: ProductM, index: number) => (
                <SeriItem
                    id={item._id}
                    key={index}
                    title={item.name}
                    category={item.categories?.name}
                    content={item.content as string}
                    brand={item.brand?.name}
                    image={item.image}
                    link={`/products/${data._id}/${item._id}`}
                />
            ))}

            {/* Sayfalama Kontrolleri */}
            <div className="flex justify-center mt-4 space-x-2">
                <button
                    disabled={currentPage === 1}
                    onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
                    className="px-4 py-2 bg-gray-300 rounded disabled:opacity-50"
                >
                    Önceki
                </button>
                <span className="px-4 py-2">{currentPage} / {totalPages}</span>
                <button
                    disabled={currentPage === totalPages}
                    onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages))}
                    className="px-4 py-2 bg-gray-300 rounded disabled:opacity-50"
                >
                    Sonraki
                </button>
            </div>
        </div>
    );
};

export default SeriList;