import style from "./PaginationControls.module.css";
import IconButton from "@mui/material/IconButton";
import ArrowForwardIcon from "@mui/icons-material/ArrowForwardIos";
import ArrowBackwardIcon from "@mui/icons-material/ArrowBackIos";
import { useEffect } from "react";

export interface PaginationControlProps {
    onChange?: (page: number, pageZize: number) => void;
    current: number;
    size: number;
    max: number;
}

export default function PaginationControls(props: PaginationControlProps) {
    const { current, size, max, onChange = () => {} } = props;

    useEffect(() => {}, [current]);

    const handlePrevious = () => {
        let newPage = current - 1;

        if (newPage < 1) {
            newPage = 1;
            return;
        }

        if (current > 1) {
            onChange(newPage, size);
        }
    };

    const handleNext = () => {
        if (current < max) {
            onChange(current + 1, size);
        }
    };

    return (
        <div className={style.paginationControls}>
            <IconButton onClick={handlePrevious}>
                <ArrowBackwardIcon sx={{ fontSize: 24 }} />
            </IconButton>
            <span className={style.paginationLabel}>
                {current} / {max}
            </span>
            <IconButton onClick={handleNext}>
                <ArrowForwardIcon sx={{ fontSize: 24 }} />
            </IconButton>
        </div>
    );
}
