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

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

const BottomPopup = ({ 
  children, 
  active = false, 
  title, 
  close 
}) => (
  <>
    <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