import type {PaginationModel} from "../../../type/viewModel.ts";

export function Pagination({
                               totalItems,
                               totalPages,
                               currentPage,
                               size = 10,
                               onPageChange,
                           }: PaginationModel) {

    if (totalItems === 0) {
        return null;
    }

    const startPage =
        Math.floor((currentPage - 1) / size)
        * size + 1;

    const endPage =
        Math.min(startPage + size - 1, totalPages);

    const pages = Array.from(
        {length: endPage - startPage + 1},
        (_, idx) => startPage + idx
    );

    return (
        <div className="page">

            <button
                className="btn_page_first"
                aria-label="첫 페이지"
                onClick={() => onPageChange(1)}
                disabled={currentPage === 1}
            >
                <i></i>
            </button>

            <button
                className="btn_page_prev"
                aria-label="이전 페이지"
                onClick={() =>
                    onPageChange(
                        Math.max(startPage - size, 1)
                    )
                }
                disabled={startPage === 1}
            >
                <i></i>
            </button>

            {pages.map(page => (
                <button
                    key={page}
                    className={page === currentPage ? 'on' : ''}
                    onClick={() => onPageChange(page)}
                    disabled={page === currentPage}
                >
                    {page}
                </button>
            ))}

            <button
                className="btn_page_next"
                aria-label="다음 페이지"
                onClick={() =>
                    onPageChange(
                        Math.min(
                            startPage + size,
                            totalPages
                        )
                    )
                }
                disabled={endPage >= totalPages}
            >
                <i></i>
            </button>

            <button
                className="btn_page_last"
                aria-label="마지막 페이지"
                onClick={() => onPageChange(totalPages)}
                disabled={currentPage === totalPages}
            >
                <i></i>
            </button>

        </div>
    );
}