import React from "react";
const LogsPagination = (props) => {
    const totalPages = Math.max(1, Math.ceil(props.totalItems === 0
        ? 1
        : props.totalItems / Math.max(props.pageSize, 1)));
    const safeCurrentPage = Math.min(props.currentPage, totalPages);
    const firstItemIndex = props.totalItems === 0 ? 0 : (safeCurrentPage - 1) * props.pageSize + 1;
    const lastItemIndex = props.totalItems === 0
        ? 0
        : Math.min(props.totalItems, safeCurrentPage * props.pageSize);
    const disablePrev = props.isDisabled || props.totalItems === 0 || safeCurrentPage <= 1;
    const disableNext = props.isDisabled || props.totalItems === 0 || safeCurrentPage >= totalPages;
    return (React.createElement("div", { className: "flex flex-col gap-3 border-t border-gray-200 bg-gray-50/50 px-4 py-2.5 text-xs text-gray-500 md:flex-row md:items-center md:justify-between" },
        React.createElement("div", null, props.totalItems === 0 ? (React.createElement("span", { className: "text-gray-500" }, "No results to display.")) : (React.createElement("span", { className: "text-gray-500" },
            "Showing ",
            firstItemIndex.toLocaleString(),
            "-",
            lastItemIndex.toLocaleString(),
            " of",
            " ",
            props.totalItems.toLocaleString()))),
        React.createElement("div", { className: "flex flex-wrap items-center gap-3" },
            React.createElement("label", { className: "flex items-center gap-2" },
                React.createElement("span", { className: "text-[10px] uppercase tracking-wide text-gray-400" }, "Rows"),
                React.createElement("select", { className: "rounded-md border border-gray-200 bg-white px-2 py-1 text-xs text-gray-700 focus:border-indigo-400 focus:outline-none focus:ring-1 focus:ring-indigo-200", value: props.pageSize, onChange: (event) => {
                        const size = Number(event.target.value) || props.pageSize;
                        props.onPageSizeChange(size);
                    }, disabled: props.isDisabled }, props.pageSizeOptions.map((option) => {
                    return (React.createElement("option", { key: option, value: option }, option));
                }))),
            React.createElement("div", { className: "inline-flex items-center gap-1 rounded-lg border border-gray-200 bg-white p-0.5" },
                React.createElement("button", { type: "button", className: "rounded-md px-3 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-300 disabled:cursor-not-allowed disabled:opacity-40", onClick: () => {
                        if (!disablePrev) {
                            props.onPageChange(Math.max(1, safeCurrentPage - 1));
                        }
                    }, disabled: disablePrev }, "Previous"),
                React.createElement("span", { className: "px-3 text-[11px] text-gray-400" },
                    "Page ",
                    safeCurrentPage,
                    " / ",
                    totalPages),
                React.createElement("button", { type: "button", className: "rounded-md px-3 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-300 disabled:cursor-not-allowed disabled:opacity-40", onClick: () => {
                        if (!disableNext) {
                            props.onPageChange(Math.min(totalPages, safeCurrentPage + 1));
                        }
                    }, disabled: disableNext }, "Next")))));
};
export default LogsPagination;
//# sourceMappingURL=LogsPagination.js.map