'use client'

import { motion } from 'framer-motion'
import { X } from 'lucide-react'
import { smoothScroll } from '@/lib/utils'

interface MobileMenuProps {
  navItems: { name: string; href: string }[]
  onClose: () => void
}

const MobileMenu = ({ navItems, onClose }: MobileMenuProps) => {
  const handleNavClick = (href: string) => {
    smoothScroll(href)
    onClose()
  }

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="fixed inset-0 z-50 md:hidden"
    >
      {/* Backdrop */}
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
        onClick={onClose}
      />
      
      {/* Menu Panel */}
      <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-surface border-l border-gray-700/50"
      >
        {/* Header */}
        <div className="flex items-center justify-between p-6 border-b border-gray-700/50">
          <h2 className="text-xl font-bold text-primary">Navigation</h2>
          <motion.button
            whileTap={{ scale: 0.9 }}
            onClick={onClose}
            className="p-2 text-text hover:text-primary transition-colors"
          >
            <X size={24} />
          </motion.button>
        </div>

        {/* Navigation Items */}
        <nav className="p-6">
          <ul className="space-y-3">
            {navItems.map((item, index) => (
              <motion.li
                key={item.name}
                initial={{ x: 50, opacity: 0 }}
                animate={{ x: 0, opacity: 1 }}
                transition={{ delay: index * 0.1 }}
              >
                <button
                  onClick={() => handleNavClick(item.href)}
                  className="w-full text-left text-lg text-text hover:text-primary transition-colors duration-300 py-4 px-4 rounded-xl hover:bg-gray-700/50 border border-gray-700/30 hover:border-primary/30"
                >
                  {item.name}
                </button>
              </motion.li>
            ))}
          </ul>
        </nav>
      </motion.div>
    </motion.div>
  )
}

export default MobileMenu