"use client";

import { useEffect, useState } from "react";
import PaginationPages from "./PaginationPages";
import React from "react";
import PropertyCard from "../homePage/PropertyCard";
type Post = {
  id: number;
  title: string;
  slug: string;
  price: number;
};

const PaginationProp = ({ filterData }: any) => {
  const [posts, setPosts] = useState<Post[]>([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [postsPerPage] = useState(6);
  useEffect(() => {
    if (filterData && Array.isArray(filterData)) {
      setPosts(filterData);
    }
  }, [filterData]);
  const indexOfLastPost = currentPage * postsPerPage;
  const indexOfFirstPost = indexOfLastPost - postsPerPage;
  const currentPosts: Post[] = posts.slice(indexOfFirstPost, indexOfLastPost);
  const paginate = (pageNumber: number) => {
    setCurrentPage(pageNumber);
  };
  return (
    // relative z-[-1]
    <div className="flex flex-col gap-[100px] ">
      <div className="grid xl:grid-cols-3 md:grid-cols-2  gap-6  transition-all duration-500 ">
        {currentPosts?.map((item) => {
          return <PropertyCard key={item.id} item={item} />;
        })}
      </div>
      <PaginationPages
        postsPerPage={postsPerPage}
        totalPosts={posts.length}
        paginate={paginate}
        currentPage={currentPage}
      />
    </div>
  );
};

export default PaginationProp;