import React from 'react';
import {
    Box,
    Select,
    MenuItem,
    Typography,
    Pagination,
    FormControl, InputLabel,
} from '@mui/material';

type Props = {
    totalRecords: number;
    page: number;
    rowsPerPage: number;
    onPageChange: (newPage: number) => void;
    onRowsPerPageChange: (newRows: number) => void;
    rowsPerPageOptions?: number[];
};

const CustomPagination: React.FC<Props> = (
    {
        totalRecords,
        page,
        rowsPerPage,
        onPageChange,
        onRowsPerPageChange,
        rowsPerPageOptions = [30, 50, 100],
    }) => {
    const totalPages = Math.ceil(totalRecords / rowsPerPage);
    const from = totalRecords === 0 ? 0 : (page - 1) * rowsPerPage + 1;
    const to = Math.min(page * rowsPerPage, totalRecords);

    return (
        <Box display="flex" justifyContent="space-between" alignItems="center" mt={2} flexWrap="wrap" gap={2}>
            {/* Rows per page */}
            <Box display="flex" alignItems="center" gap={1}>
                <InputLabel id="rows_per_page">Rows per page:</InputLabel>
                <FormControl size="small">
                    <Select
                        value={rowsPerPage}
                        onChange={(e) => onRowsPerPageChange(Number(e.target.value))}
                        labelId='rows_per_page'
                    >
                        {rowsPerPageOptions.map((option) => (
                            <MenuItem key={option} value={option}>
                                {option}
                            </MenuItem>
                        ))}
                    </Select>
                </FormControl>
            </Box>

            {/* Range info */}
            <Typography variant="body2" sx={{ fontWeight: 'bold' }}>
                Showing {from}–{to} of {totalRecords}
            </Typography>

            {/* Pagination controls */}
            <Pagination
                count={totalPages}
                page={page}
                onChange={(_e, newPage) => onPageChange(newPage)}
                siblingCount={2}
                boundaryCount={1}
                shape="rounded"
                color="standard"
                showFirstButton
                showLastButton
            />
        </Box>
    );
};

export default CustomPagination;
