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

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

  return (
    <Grid item sx={{marginTop: 1}}>
      <Box sx={{
        width: 100,
        padding: 1,
        border: '1px solid rgba(76, 175, 80, 0.5)',
        color: 'rgb(76, 175, 80)',
        borderRadius: '4px',
        textAlign: 'center',
        cursor: 'pointer'
      }} onClick={() => router.push(route).then(() => window.scrollTo(0, 0))}
      >
        {kantite} <br /> {tit}
      </Box>
    </Grid>
  )
}

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