import React, { useState, useRef, useEffect } from "react";
import partnerList from "@/data/partners";
import Pagination from "@/components/common/Pagination";

const ITEMS_PER_PAGE = 16;

const Partners: React.FC = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const paginationRef = useRef<HTMLDivElement>(null); // 페이지네이션 ref

  const totalItems = partnerList.length;
  const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
  const currentItems = partnerList.slice(startIndex, startIndex + ITEMS_PER_PAGE);

  // 페이지 전환 시, 페이지네이션 위치를 기준으로 스크롤 이동
  useEffect(() => {
    if (paginationRef.current) {
      paginationRef.current.scrollIntoView({ behavior: "instant", block: "start" });
    }
  }, [currentPage]);

  const handlePageChange = (page: number) => {
    setCurrentPage(page);
  };

  return (
    <div className="max-w-7xl mx-auto">
      {/* 상단 소개 영역 */}
      <div className="flex items-center">
        <div className="flex-1">
          <div className="pl-30 mt-10">
            <span className="text-black text-2xl font-medium font-['Noto_Sans_KR']">반도산전은 </span>
            <span className="text-blue-900 text-2xl font-bold font-['Noto_Sans_KR']">50</span>
            <span className="text-black text-2xl font-medium font-['Noto_Sans_KR']">
              개가 넘는 <br />
              신뢰받는 기업과 함께<br /><br />
              고객의 가치실현을 <br />
            </span>
            <span className="text-blue-900 text-2xl font-bold font-['Noto_Sans_KR']">협력</span>
            <span className="text-black text-2xl font-medium font-['Noto_Sans_KR']">으로 이끌어내고 있습니다.</span>
          </div>
        </div>
        <div className="flex-1">
          <img
            className="w-full h-[350px] object-cover object-center"
            src="/image/협력사.jpg"
          />
        </div>
      </div>

      {/* 카드 목록 */}
      <div className="grid grid-cols-4 gap-5 mt-10 mb-4">
        {currentItems.map((partner, index) => (
          <div
            key={index}
            className="flex justify-center items-center h-72 bg-white outline outline-offset-[-1px] outline-zinc-300"
          >
            <img className="w-50" src={partner.imageUrl} alt={`협력사 ${index}`} />
          </div>
        ))}
      </div>

      {/* 페이지네이션 */}
      {totalItems > ITEMS_PER_PAGE && (
        <div className="flex justify-center pb-10" ref={paginationRef}>
          <Pagination
            currentPage={currentPage}
            totalItems={totalItems}
            itemsPerPage={ITEMS_PER_PAGE}
            onPageChange={handlePageChange}
          />
        </div>
      )}
    </div>
  );
};

export default Partners;
