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

const PREFIX = 'kat-kay-la'

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

const StyledGrid = styled(Grid)({
  [`& .${classes.root}`]: {
    minWidth: 275
  },
})

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

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

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