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

const PREFIX = 'kat-kay-la'

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

const StyledGrid = styled(Grid)({
  [`& .${classes.root}`]: {
    minWidth: 275
  },
  [`& .${classes.bullet}`]: {
    display: 'inline-block',
    margin: '0 2px',
    transform: 'scale(0.8)'
  },
  [`& .${classes.title}`]: {
    fontSize: 14
  },
  [`& .${classes.pos}`]: {
    marginBottom: 12
  }
})

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

  return (
    <StyledGrid 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>
    </StyledGrid>
  )
}

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