import {useState} from 'react'
import PropTypes from 'prop-types'
import Card from '@mui/material/Card'
import CardContent from '@mui/material/CardContent'
import {Button, CardActionArea, CardActions, CardMedia, Divider, Grid} from '@mui/material'
import Typography from '@mui/material/Typography'
import RezoImaj from './rezo-imaj'

export default function KatRezoNou({tit, img, soutit, ko, lyen}) {
  const [open, setOpen] = useState(false)

  const handleClickOpen = () => {
    setOpen(true)
  }

  return (
    <>
      <Grid item xs={12} md={6} sx={{marginBottom: 3}}>
        <Card raised>
          <CardActionArea onClick={handleClickOpen}>
            <CardMedia
              sx={{objectFit: 'contain'}}
              component='img'
              height='150'
              image={`/captures/${img}.png`}
              alt={`Aperçu ${tit}`}
              title='Cliquez pour agrandir'
            />
          </CardActionArea>
          <Divider />
          <CardContent>
            <Typography color='primary' variant='button' sx={{fontSize: 25}}>
              {tit}
            </Typography>
            <Typography variant='h6' component='div'>
              {soutit}
            </Typography>
            <Typography variant='body2'>
              {ko}
            </Typography>
          </CardContent>
          <CardActions sx={{textAlign: 'center'}}>
            <Button variant='outlined' size='small' color='primary' onClick={() => window.open(lyen, '_blank')}>
              Accéder à {tit}
            </Button>
          </CardActions>
        </Card>
      </Grid>
      <RezoImaj img={img} open={open} setOpen={setOpen} />
    </>
  )
}

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