import MenuS from "@/components/icons/MenuS";
import Pagination from "@/app/component/Pagination";
import ItemSpecialties from "./ItemSpecialties";
import { useState } from "react";

function List({ specialties = [] }) {
  const [page, setPage] = useState(1);
  const itemsPerPage = 24;

  const startIndex = (page - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  const currentList = specialties.filter((_, i) => i >= startIndex && i < endIndex);

  return (
    <div className="bg-[#FAFAFA]">
      <div className="flex items-center justify-center gap-[12px] pt-[24px] mb-[40px]">
        <MenuS />
        <h1 className="text-[#3B3B3B] text-[16px] sm:text-[19px] md:text-[22px] lg:text-[24px] font-bold">
          لیست تخصص ها
        </h1>
      </div>
      {specialties.length === 0 ? (
        <div className="text-center py-10 text-gray-500">
          تخصصی با این عنوان یافت نشد!
        </div>
      ) : (
        <ul
          className="padding-responsive grid grid-cols-2 sm:grid-cols-3 mg:grid-cols-4 lg:grid-cols-6 
              gap-x-[16px] md:gap-x-[20px] lg:gap-x-[24px] 
              gap-y-[16px] sm:gap-y-[24px] md:gap-y-[32px] lg:gap-y-[40px]"
        >
          {currentList.map((speciality) => (
            <ItemSpecialties data={speciality} key={speciality.id} />
          ))}
        </ul>
      )}
      <div className="mt-[48px] flex justify-center">
        <Pagination
          page={page}
          setPage={setPage}
          list={specialties}
          itemsPerPage={itemsPerPage}
        />
      </div>
    </div>
  );
}

export default List;