import styles from './fullscreen.module.scss'
import Image, { StaticImageData } from 'next/image'

type FullScreenProps = {
  display: boolean
  image: StaticImageData
  alt?: string
  closeClicked: () => void
  nextClicked: () => void
}

export const Fullscreen = ({display, image, closeClicked, alt, nextClicked}: FullScreenProps) => {
  if(display)
  return (
    <div className={styles.display}>
      <div
        className={styles.close}
        onClick={closeClicked}
      >x</div>
      <Image
        onClick={nextClicked}
        className={styles.displayImage}
        height={image.height}
        width={image.width}
        src={image.src}
        alt={alt || ""}
        unoptimized={true}
      />
    </div>
  )
}