import PropTypes from 'prop-types'
import {useRouter} from 'next/router'
import Grid from '@mui/material/Grid'
import Card from '@mui/material/Card'
import CardActionArea from '@mui/material/CardActionArea'
import CardContent from '@mui/material/CardContent'
import Typography from '@mui/material/Typography'

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

  return (
    <Grid item xs={12} md={6}>
      <Card variant='outlined'>
        <CardActionArea onClick={() => router.push(href, as).then(() => window.scrollTo(0, 0))}>
          <CardContent>
            <Typography style={{fontWeight: 'bold'}} align='center' variant='h5' component='h4'>
              {kantite}
            </Typography>
            <Typography align='center' variant='h6' component='h5'>
              {tit}
            </Typography>
          </CardContent>
        </CardActionArea>
      </Card>
    </Grid>
  )
}

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