import PropTypes from 'prop-types'
import {useRouter} from 'next/router'
import {makeStyles} from '@material-ui/core/styles'
import Pagination from '@material-ui/lab/Pagination'
import {Grid} from '@material-ui/core'

const useStyles = makeStyles(theme => ({
  root: {
    '& > *': {
      marginBottom: theme.spacing(2)
    }
  }
}))

export default function Pajinasyon({pajTotal, paj}) {
  const router = useRouter()
  const classes = useStyles()
  const handleChange = (event, value) => {
    const href = `/awtis?paj&paj=${value}`
    const as = `/awtis/paj/${value}`
    router.push(href, as)
  }

  return (
    <Grid container justify='center'>
      <div className={classes.root}>
        <Pagination size='small' page={paj} count={pajTotal} color='primary' onChange={handleChange} />
      </div>
    </Grid>
  )
}

Pajinasyon.propTypes = {
  pajTotal: PropTypes.number.isRequired,
  paj: PropTypes.number.isRequired
}