import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useNavigate } from 'react-router-dom';

const UpgradeModal = ({ isOpen, onClose }) => {
  const navigate = useNavigate();

  return (
    <AnimatePresence>
      {isOpen && (
        <div className="fixed inset-0 z-[10000] flex items-center justify-center p-4">
          {/* Backdrop */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={onClose}
            className="absolute inset-0 bg-black/40 backdrop-blur-sm"
          />

          {/* Modal Content */}
          <motion.div
            initial={{ opacity: 0, scale: 0.9, y: 20 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.9, y: 20 }}
            className="relative bg-white rounded-[32px] shadow-2xl w-full max-w-sm overflow-hidden p-10 flex flex-col items-center text-center"
          >
            <h4 className="text-[22px] font-bold text-gray-900 mb-6">Note</h4>
            
            <h3 className="text-[20px] font-bold text-gray-900 mb-4 leading-tight">
              Membership Upgrade Required
            </h3>
            
            <p className="text-[#888] text-[15px] leading-relaxed mb-10 px-2 font-medium">
              You are currently a Free Member. Upgrade to a Premium Plan to start sending interests and connecting with your perfect match.
            </p>

            <div className="flex w-full gap-4">
              <button
                onClick={onClose}
                className="flex-1 py-4 border border-gray-200 text-gray-500 rounded-2xl font-bold text-[16px] hover:bg-gray-50 transition-all active:scale-[0.98]"
              >
                Later
              </button>
              <button
                onClick={() => {
                  navigate('/subscription-plan');
                  onClose();
                }}
                className="flex-1 py-4 bg-[#e91e4a] text-white rounded-2xl font-bold text-[16px] shadow-lg shadow-red-200 hover:bg-[#d81b45] transition-all active:scale-[0.98]"
              >
                Upgrade Now
              </button>
            </div>
          </motion.div>
        </div>
      )}
    </AnimatePresence>
  );
};

export default UpgradeModal;