import React from 'react';
import styled from "styled-components";
import {buttonNames} from "../../const/buttons/names";
import {IconComponent} from "../../const/buttons/icons";

const PaginateWrapper = styled.div`
    width: 100%;
    margin-top: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
`
const Page = styled.button`
    width: 36px;
    height: 36px;
    background: ${(props => props.theme.primary)};
    color: ${(props => props.theme.textColor)};
    border: 1px solid ${(props => props.theme.borderColor)};
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;

    transition: .4s ease;
    &:hover {
        background: ${(props => props.theme.background)};
    }
`

interface PaginationProps {
    currentPage: number;
    totalPages: number;
    onPrevPage: () => void;
    onNextPage: () => void;
}

const Pagination = ({currentPage, totalPages, onPrevPage, onNextPage}: PaginationProps) => {
    return (
        <PaginateWrapper>
            <Page
                onClick={onPrevPage}
                disabled={currentPage === 1}
            >
                <IconComponent
                    width="20"
                    height="20"
                    name={buttonNames[17]}
                />
            </Page>

            <Page
                onClick={onNextPage}
                disabled={currentPage === totalPages}
            >
                <IconComponent
                    width="20"
                    height="20"
                    name={buttonNames[6]}
                />
            </Page>
        </PaginateWrapper>
    );
};

export default Pagination;