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

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}>
            <Typography color='primary' sx={{margin: 1, fontSize: 16}} variant='button' component='div'>
              <strong>Aperçu</strong>
            </Typography>
          </CardActionArea>
          <Divider sx={{borderWidth: 1}} />
          <CardContent>
            <Button sx={{fontSize: 25}} onClick={() => window.open(lyen, '_blank')}>
              {tit}
            </Button>
            <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 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
}