import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon } from "../icon/icon.js";
import { PaginationButton } from "./pagination-button.js";
export const Pagination = (props) => {
    const { pages = [], goToFirstPage, goToLastPage, goToNextPage, goToPreviousPage, goToPage, isNextPageAvailable, isPreviousPageAvailable, hiddenNextPages, firstPageLabel = "First", lastPageLabel = "Last", nextPageLabel = "Next", previousPageLabel = "Previous", } = props;
    return (_jsxs("div", { className: "flex gap-x-1", children: [firstPageLabel ? (_jsx(PaginationButton, { disabled: !isPreviousPageAvailable, onClick: () => goToFirstPage(), children: firstPageLabel })) : null, previousPageLabel ? (_jsxs(PaginationButton, { disabled: !isPreviousPageAvailable, onClick: () => goToPreviousPage(), children: [_jsx(Icon, { className: "rotate-90", name: "ChevronDown", size: 16 }), previousPageLabel] })) : null, pages.map((page) => (_jsx(PaginationButton, { active: page.active, onClick: () => goToPage(page.index), children: page.number }, page.index))), hiddenNextPages ? (_jsx("span", { className: "flex items-center justify-center px-2", children: "..." })) : null, nextPageLabel ? (_jsxs(PaginationButton, { disabled: !isNextPageAvailable, onClick: () => goToNextPage(), children: [nextPageLabel, _jsx(Icon, { className: "-rotate-90", name: "ChevronDown", size: 16 })] })) : null, lastPageLabel ? (_jsx(PaginationButton, { disabled: !isNextPageAvailable, onClick: () => goToLastPage(), children: lastPageLabel })) : null] }));
};
//# sourceMappingURL=pagination.js.map