import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Github, Linkedin, Mail, ChevronDown } 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 bg-black/50 z-40 md:hidden"
          onClick={() => setIsOpen(false)}
        >
          <motion.div
            initial={{ x: '100%' }}
            animate={{ x: 0 }}
            exit={{ x: '100%' }}
            transition={{ type: 'tween', duration: 0.3 }}
            className="absolute right-0 top-0 h-full w-80 bg-white shadow-xl"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="p-6 pt-20">
              {/* Menu Section */}
              <div className="mb-8">
                <h3 className="text-lg font-semibold text-gray-900 mb-4">Menu</h3>
                <nav className="space-y-3">
                  <a href="#" className="block text-gray-600 hover:text-primary-600">Case Studies</a>
                  <a href="#" className="block text-gray-600 hover:text-primary-600">Blog</a>
                  <a href="#" className="block text-gray-600 hover:text-primary-600">Contacts</a>
                  <a href="#" className="block text-gray-600 hover:text-primary-600">About Us</a>
                  <a href="#" className="block text-gray-600 hover:text-primary-600">FAQ</a>
                </nav>
              </div>

              {/* Services Section */}
              <div className="mb-8">
                <h3 className="text-lg font-semibold text-gray-900 mb-4">Services</h3>
                <nav className="space-y-3">
                  <a href="#" className="block text-gray-600 hover:text-primary-600">Web Development</a>
                  <a href="#" className="block text-gray-600 hover:text-primary-600">Mobile Development</a>
                  <a href="#" className="block text-gray-600 hover:text-primary-600">Support and Maintenance</a>
                </nav>
              </div>

              {/* Contact Info */}
              <div className="mb-8">
                <p className="text-sm text-gray-600 mb-2">Feel free to drop us a note:</p>
                <a href="mailto:contact@sargas.io" className="text-primary-600 font-medium">
                  contact@sargas.io
                </a>
              </div>

              {/* Social Links */}
              <div className="flex space-x-4 mb-8">
                <a href="#" className="text-gray-400 hover:text-gray-600">
                  <Github className="w-6 h-6" />
                </a>
                <a href="#" className="text-gray-400 hover:text-gray-600">
                  <Linkedin className="w-6 h-6" />
                </a>
                <a href="#" className="text-gray-400 hover:text-gray-600">
                  <Mail className="w-6 h-6" />
                </a>
              </div>

              {/* Footer Links */}
              <div className="border-t border-gray-200 pt-6">
                <div className="flex justify-between text-sm text-gray-500">
                  <a href="#" className="hover:text-gray-700">Privacy Policy</a>
                  <a href="#" className="hover:text-gray-700">Terms of Use</a>
                </div>
              </div>
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
};

export default MobileMenu;