import { jsx as _jsx } from "react/jsx-runtime";
import { ChevronLOutlineMd } from '../../../icons/ChevronLOutlineMd';
import { ChevronROutlineMd } from '../../../icons/ChevronROutlineMd';
import { cva } from '../../utils/cva';
import { paginationItemClassnames } from './constants';
import { Ellipsis, StyledButton } from './styles';
const ellipsisCva = cva(paginationItemClassnames.ellipsis, {
    variants: {
        disabled: {
            true: paginationItemClassnames.disabled,
        },
    },
});
export const PaginationItem = ({ pageNumber, type, selected, disabled, onClick, onItemClick, restPropsDisabled, }) => {
    if (type === 'start-ellipsis' || type === 'end-ellipsis') {
        return (_jsx(Ellipsis, { className: ellipsisCva({ disabled: restPropsDisabled }), children: "\u2026" }));
    }
    const PaginationButton = ({ children, ...rest }) => (_jsx(StyledButton, { variant: "text", color: "grey", size: "small", selected: selected, disabled: disabled || restPropsDisabled, onClick: (e) => {
            onItemClick(pageNumber, onClick, e);
        }, ...rest, children: children }));
    if (type === 'page') {
        return (_jsx(PaginationButton, { className: paginationItemClassnames.pageButton, "aria-current": selected, children: pageNumber }));
    }
    if (type === 'previous') {
        return (_jsx(PaginationButton, { className: paginationItemClassnames.previousButton, "aria-label": "\u041F\u0435\u0440\u0435\u0439\u0442\u0438 \u043D\u0430 \u043F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0443\u044E \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443", children: _jsx(ChevronLOutlineMd, {}) }, "previous"));
    }
    if (type === 'next') {
        return (_jsx(PaginationButton, { className: paginationItemClassnames.nextButton, "aria-label": "\u041F\u0435\u0440\u0435\u0439\u0442\u0438 \u043D\u0430 \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0443\u044E \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443", children: _jsx(ChevronROutlineMd, {}) }, "next"));
    }
    return null;
};
