import PropTypes from 'prop-types'
import Box from '@mui/material/Box'
import Card from '@mui/material/Card'
import CardContent from '@mui/material/CardContent'
import {CardActionArea} from '@mui/material'
import Typography from '@mui/material/Typography'

export default function KatRezoNou({tit, soutit, ko, lyen}) {
  return (
    <Box sx={{minWidth: 275, marginBottom: 3}}>
      <Card raised>
        <CardActionArea onClick={() => window.open(lyen, '_blank')}>
          <CardContent>
            <Typography color='primary' variant='button' sx={{fontSize: 25}}>
              {tit}
            </Typography>
            <Typography variant='h6' component='div'>
              {soutit}
            </Typography>
            <Typography variant='body2'>
              {ko}
            </Typography>
          </CardContent>
        </CardActionArea>
      </Card>
    </Box>
  )
}

KatRezoNou.propTypes = {
  tit: PropTypes.string.isRequired,
  soutit: PropTypes.string.isRequired,
  ko: PropTypes.string.isRequired,
  lyen: PropTypes.string.isRequired
}