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

const PREFIX = 'pajinasyon'

const classes = {
  root: `${PREFIX}-root`
}

const StyledGrid = styled(Grid)((
  {
    theme
  }
) => ({
  [`& .${classes.root}`]: {
    '& > *': {
      marginBottom: theme.spacing(2)
    }
  }
}))

export default function Pajinasyon({pajTotal, paj}) {
  const router = useRouter()

  const handleChange = (event, value) => {
    const href = `/awtis?paj&paj=${value}`
    const as = `/awtis/paj/${value}`
    router.push(href, as)
  }

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

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