'use client'

import PropTypes from 'prop-types'
import {useRouter} from 'next/navigation'
import {useTheme} from '@mui/material/styles'
import Grid from '@mui/material/Unstable_Grid2'
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 KatAkey({tit, kantite, href, as}) {
  const theme = useTheme()
  const rute = useRouter()

  return (
    <Grid xs={12} md={6}>
      <Card sx={{borderColor: theme.palette.primary[theme.palette.mode]}} color='primary' variant='outlined'>
        <CardActionArea onClick={() => rute.push(href, as)}>
          <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>
  )
}

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