import PropTypes from 'prop-types'
import {useRouter} from 'next/router'
import {
  Grid,
  Button
} from '@mui/material'

export default function KatKayLa({tit, kantite, route}) {
  const router = useRouter()

  return (
    <Grid item sx={{marginTop: 1}}>
      <Button sx={{width: 100}} variant='outlined' onClick={() => router.push(route).then(() => window.scrollTo(0, 0))}>
        {kantite} <br /> {tit}
      </Button>
    </Grid>
  )
}

KatKayLa.propTypes = {
  tit: PropTypes.string.isRequired,
  kantite: PropTypes.number.isRequired,
  route: PropTypes.string.isRequired
}