import { useState } from 'react'

const Lightbox = ({ cancel, children }) => {

  const [ box, setBox ] = useState(false)

  if (box) return (
    <div className={`
      fixed top-0 left-0 right-0 w-screen h-screen
      bg-neutral bg-opacity-90 z-30
      hover:cursor-zoom-out flex flex-col justify-center
      `} onClick={() => setBox(false)}>
        <div className="m-auto text-neutral-content lightbox" style={{
          maxHeight: "calc(100vh - 6rem)",
          maxWidth: "calc(100vw - 6rem)",
        }}>
          {children}
        </div>
    </div>
  )

  return (
    <div
      onClick={() => setBox(!box)}
      className="hover:cursor-zoom-in"
    >{children}</div>
  )
}

export default Lightbox