import React from 'react';

/**
 * Pagination 컴포넌트의 props 타입 정의
 */
interface PaginationProps {
  /** 현재 페이지 번호 (1부터 시작) */
  currentPage: number;

  /** 전체 항목 개수 */
  totalItems: number;

  /** 페이지당 항목 개수 */
  itemsPerPage: number;

  /** 페이지 변경 시 호출되는 콜백 함수 */
  onPageChange: (page: number) => void;
}

const Pagination: React.FC<PaginationProps> = ({currentPage, totalItems, itemsPerPage, onPageChange,}) => {
    const totalPages = Math.ceil(totalItems / itemsPerPage);

    const handleClick = (page: number) => {
        if (page >= 1 && page <= totalPages) {
            onPageChange(page);
        }
    };

    return (
        <div className="flex w-[650px] h-12 mx-auto items-center justify-center gap-3 my-16">
            {/* Prev 버튼 */}
            <button
                className="w-12 h-12 outline outline-neutral-200 rounded disabled:opacity-40 enabled:cursor-pointer"
                onClick={() => handleClick(currentPage - 1)}
                disabled={currentPage === 1}
            >
                <div className="text-center text-neutral-500 text-2xl">{'<'}</div>
            </button>

            {/* 페이지 버튼들 */}
            {[...Array(totalPages)].map((_, i) => {
                const page = i + 1;
                const isActive = currentPage === page;

                return (
                    <button
                        key={page}
                        onClick={() => handleClick(page)}
                        className={`w-12 h-12 cursor-pointer rounded ${
                            isActive
                                ? 'bg-blue-900 text-white'
                                : 'outline outline-neutral-200 text-neutral-500'
                        } text-2xl`}
                    >
                        {page}
                    </button>
                );
            })}

            {/* Next 버튼 */}
            <button
                className="w-12 h-12 outline outline-neutral-200 rounded disabled:opacity-40 enabled:cursor-pointer"
                onClick={() => handleClick(currentPage + 1)}
                disabled={currentPage === totalPages}
            >
                <div className="text-center text-neutral-500 text-2xl">{'>'}</div>
            </button>
        </div>
    );
};

export default Pagination;
