import {useState} from 'react'
import PropTypes from 'prop-types'
import Card from '@mui/material/Card'
import CardContent from '@mui/material/CardContent'
import CardActionArea from '@mui/material/CardActionArea'
import Divider from '@mui/material/Divider'
import Grid from '@mui/material/Grid'

import Typography from '@mui/material/Typography'
import {CardMedia} from '@mui/material'

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: 2}}>
        <Card raised>
          <CardActionArea onClick={handleClickOpen}>
            <CardMedia
              component='img'
              height='140'
              image={`/captures/${img}.png`}
              alt={`Aperçu ${tit}`}
            />
            <CardContent>
              <Typography color='primary' variant='h6' component='div'>
                {tit}
              </Typography>
              <Typography variant='h6' component='div'>
                {soutit}
              </Typography>
              <Typography variant='body2'>
                {ko}
              </Typography>
            </CardContent>
          </CardActionArea>
          <Divider sx={{borderWidth: 1}} />
          <CardActionArea onClick={() => window.open(lyen, '_blank')}>
            <CardContent>
              <Typography textAlign='center' color='primary' variant='h6' component='div'>
                Accéder à {tit}
              </Typography>
            </CardContent>
          </CardActionArea>
        </Card>
      </Grid>
      <RezoImaj tit={tit} 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
}