import { animated, useSpring } from "@react-spring/web";

const WBPopup = ({ isOpen, onClose, children }) => {
  const animation = useSpring({
    transform: isOpen ? "translateY(0%)" : "translateY(100%)",
    opacity: isOpen ? 1 : 0,
    config: {
      mass: 1,
      tension: 180,
      friction: 24,
      clamp: false,
      velocity: 0,
      easing: (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),
    },
  });

  return (
    <>
      {isOpen && <div className="wb-popup-bg" onClick={onClose} />}

      <animated.div
        style={animation}
        className="wb-popup-content-wrap"
        onClick={onClose}
      >
        <div className="wb-popup-content">
          <div className="wb-popup-close" onClick={onClose}>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
              <path d="M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z" />
            </svg>
          </div>
          {children}
        </div>
      </animated.div>
    </>
  );
};

export default WBPopup;
