import { XMarkIcon } from "@heroicons/react/24/outline"
import { AnimatePresence, motion } from "framer-motion"
import { useEffect } from "react"

const transition = { ease: 'linear', duration: 0.2 }

const BottomPopup = ({ 
  children, 
  active = false, 
  title, 
  close 
}) => {
  useEffect(() => {
    if (active) {
      document.querySelector('html, body').classList.add('overflow-hidden')
    } else {
      document.querySelector('html, body').classList.remove('overflow-hidden')
    }
  }, [active])

  return (
    <>
      <AnimatePresence>
        { active && (
          <>
            <motion.div
              className="overlay"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={transition}
              onClick={close}
            />
            <motion.div
              initial={{ bottom: '-100%' }}
              animate={{ bottom: 0 }}
              exit={{ bottom: '-100%' }}
              transition={transition}
              className="fixed left-0 w-full border-t border-gray_r-6 rounded-t-xl z-[60] p-4 pt-0 bg-white"
            >
              <div className="flex justify-between py-4">
                <div className="font-semibold text-h-sm">{ title }</div>
                <button type="button" onClick={close}>
                  <XMarkIcon className="w-5 stroke-2" />
                </button>
              </div>
              { children }
            </motion.div>
          </>
        ) }
      </AnimatePresence>
    </>
  )
}

export default BottomPopup