bandosj/src/pages/business/Landmarks.tsx

import React, {useState} from 'react';
import Pagination from "@/components/common/Pagination";
import {getPaginatedList} from "@/utils/pagination";
import {ProjectModal} from "@/components/ProjectModal";
import projectList from "@/data/project";
import type {MajorProject} from "@/data/project";

const ITEMS_PER_PAGE = 12;

const Landmarks = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [currentPage, setCurrentPage] = useState<number>(1);
  const [selectedItem, setSelectedItem] = useState<MajorProject | null>(null); // 클릭된 카드

  const paginatedList = getPaginatedList<MajorProject>(projectList, currentPage, ITEMS_PER_PAGE);

  return (
    <div>
      <div className="relative max-w-7xl mx-auto grid grid-cols-3 gap-x-8 gap-y-10 mt-10">
        {paginatedList.map((project, index) => (
          <div
            key={index}
            className="relative shadow-lg group cursor-pointer"
            onClick={() => {
              setSelectedItem(project);
              setIsOpen(true);
            }}
          >
            <div className="absolute inset-0 bg-gradient-to-b from-transparent to-black/60"/>

            <img
              src={project.imageUrl}
              alt={project.title}
              className="w-full aspect-[4/3] object-cover"
            />

            <div className="">
              <h3
                className='absolute z-10 left-6 top-[77%] group-hover:top-[30%] transition-all duration-500 ease-in-out text-lg text-white font-semibold'>
                {project.title}
              </h3>
              <div className="absolute z-10 left-6 top-[85%] text-xs text-white leading-7">MORE +</div>
            </div>

            <div
              className="absolute inset-0 bg-gradient-to-t from-black/80 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out flex flex-col justify-center">
              {project.description && (
                <div
                  className="absolute left-6 right-6 top-[60%] group-hover:top-[40%] transition-all duration-500 ease-in-out">
                  <p className="text-sm text-white leading-8 whitespace-pre-line">
                    발주처 : {project.client}
                  </p>
                  <p className="text-sm text-white leading-8 whitespace-pre-line">
                    {project.description}
                  </p>
                  <p className="text-sm text-white leading-8 whitespace-pre-line">
                    계약금액 : {project.contractAmount}
                  </p>
                </div>
              )}
            </div>
          </div>
        ))}
      </div>

      <Pagination
        currentPage={currentPage}
        totalItems={projectList.length}
        itemsPerPage={ITEMS_PER_PAGE}
        onPageChange={setCurrentPage}
      />

      <ProjectModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        item={selectedItem}
      />
    </div>
  );
};

export default Landmarks;