import React from 'react'
import PropTypes from 'prop-types'
import {useRouter} from 'next/router'
import {
  Card,
  CardContent,
  CardActionArea,
  Typography,
  Grid
} from '@material-ui/core'
import {makeStyles} from '@material-ui/core/styles'

const useStyles = makeStyles({
  root: {
    minWidth: 275
  },
  bullet: {
    display: 'inline-block',
    margin: '0 2px',
    transform: 'scale(0.8)'
  },
  title: {
    fontSize: 14
  },
  pos: {
    marginBottom: 12
  }
})

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

  return (
    <Grid item xs={12} md={6}>
      <Card className={classes.root} variant='outlined'>
        <CardActionArea onClick={() => router.push(route).then(() => window.scrollTo(0, 0))}>
          <CardContent>
            <Typography style={{display: 'flex', justifyContent: 'center', alignItems: 'center'}} align='center' variant='h3' component='h1'>
              {tit}
              <Typography style={{marginLeft: 5}} variant='overline'>
                ({soutit})
              </Typography>
            </Typography>
            <Typography gutterBottom style={{fontWeight: 'bold'}} align='center' variant='h4' component='h2'>
              {kantite}
            </Typography>
          </CardContent>
        </CardActionArea>
      </Card>
    </Grid>
  )
}

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