import PropTypes from 'prop-types'
import Backdrop from '@mui/material/Backdrop'
import Image from 'next/image'
import useMediaQuery from '@mui/material/useMediaQuery'
import lyannaj from '../public/captures/lyannaj.png'
import pale from '../public/captures/pale.png'
import gade from '../public/captures/gade.png'
import ouwe from '../public/captures/ouwe.png'
import ekriti from '../public/captures/ekriti.png'
import mobilize from '../public/captures/mobilize.png'
import mizik from '../public/captures/mizik.png'

export default function RezoImaj({tit, img, open, setOpen}) {
  const isSmallDevice = useMediaQuery('(max-width:1160px)')
  const getSource = source => {
    if (source === 'lyannaj') {
      return lyannaj
    }

    if (source === 'pale') {
      return pale
    }

    if (source === 'gade') {
      return gade
    }

    if (source === 'ouwe') {
      return ouwe
    }

    if (source === 'ekriti') {
      return ekriti
    }

    if (source === 'mobilize') {
      return mobilize
    }

    if (source === 'mizik') {
      return mizik
    }
  }

  const source = getSource(img)

  const handleClose = () => {
    setOpen(false)
  }

  return (
    <div>
      <Backdrop
        sx={{color: '#fff', zIndex: theme => theme.zIndex.drawer + 1}}
        open={open}
        onClick={handleClose}
      >
        <div style={{width: isSmallDevice ? '100%' : '70%', height: isSmallDevice ? '100%' : '70%', position: 'relative'}}>
          <Image
            src={source}
            alt={`Aperçu ${tit}`}
            layout='fill'
            objectFit='contain'
            placeholder='blur'
          />
        </div>
      </Backdrop>
    </div>
  )
}

RezoImaj.propTypes = {
  img: PropTypes.string.isRequired,
  tit: PropTypes.string.isRequired,
  open: PropTypes.bool.isRequired,
  setOpen: PropTypes.func.isRequired
}