import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { X, Github, Linkedin, Mail } from 'lucide-react';

const MobileMenu = ({ isOpen, setIsOpen }) => {
  return (
    <AnimatePresence>
      {isOpen && (
        <>
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 mobile-menu-overlay z-50"
            onClick={() => setIsOpen(false)}
          />
          <motion.div
            initial={{ x: '100%' }}
            animate={{ x: 0 }}
            exit={{ x: '100%' }}
            transition={{ type: 'tween', duration: 0.3 }}
            className="fixed top-0 right-0 h-full w-80 bg-white shadow-xl z-50 overflow-y-auto"
          >
            <div className="p-6">
              <div className="flex items-center justify-between mb-8">
                <h2 className="text-xl font-bold text-gray-900">Menu</h2>
                <button
                  onClick={() => setIsOpen(false)}
                  className="p-2 rounded-lg hover:bg-gray-100"
                >
                  <X className="w-6 h-6" />
                </button>
              </div>

              <div className="grid grid-cols-2 gap-8">
                {/* Menu */}
                <div>
                  <h3 className="font-semibold text-gray-900 mb-4">Menu</h3>
                  <ul className="space-y-3">
                    <li><a href="#case-studies" className="text-gray-600 hover:text-gray-900">Case Studies</a></li>
                    <li><a href="#blog" className="text-gray-600 hover:text-gray-900">Blog</a></li>
                    <li><a href="#contacts" className="text-gray-600 hover:text-gray-900">Contacts</a></li>
                    <li><a href="#about" className="text-gray-600 hover:text-gray-900">About Us</a></li>
                    <li><a href="#faq" className="text-gray-600 hover:text-gray-900">FAQ</a></li>
                  </ul>
                </div>

                {/* Services */}
                <div>
                  <h3 className="font-semibold text-gray-900 mb-4">Services</h3>
                  <ul className="space-y-3">
                    <li><a href="#web-dev" className="text-gray-600 hover:text-gray-900">Web Development</a></li>
                    <li><a href="#mobile-dev" className="text-gray-600 hover:text-gray-900">Mobile Development</a></li>
                    <li><a href="#support" className="text-gray-600 hover:text-gray-900">Support and Maintenance</a></li>
                  </ul>
                </div>
              </div>

              <div className="mt-8 pt-8 border-t border-gray-200">
                <div className="mb-6">
                  <p className="text-sm text-gray-600 mb-2">Feel free to drop us a note:</p>
                  <p className="text-sm font-medium text-gray-900">contact@sargas.io</p>
                </div>
                
                <div className="flex items-center space-x-4">
                  <a href="#" className="text-gray-400 hover:text-gray-600">
                    <Github className="w-5 h-5" />
                  </a>
                  <a href="#" className="text-gray-400 hover:text-gray-600">
                    <Linkedin className="w-5 h-5" />
                  </a>
                  <a href="#" className="text-gray-400 hover:text-gray-600">
                    <span className="w-5 h-5 bg-black rounded-full flex items-center justify-center">
                      <span className="text-white text-xs font-bold">C</span>
                    </span>
                  </a>
                </div>
              </div>

              <div className="mt-8 pt-8 border-t border-gray-200">
                <div className="flex items-center space-x-4 text-sm text-gray-600">
                  <a href="#privacy" className="hover:text-gray-900">Privacy Policy</a>
                  <a href="#terms" className="hover:text-gray-900">Terms of Use</a>
                </div>
              </div>
            </div>
          </motion.div>
        </>
      )}
    </AnimatePresence>
  );
};

export default MobileMenu;