import { X } from 'lucide-react';
import { Link } from 'react-router-dom';

interface MenuSheetProps {
  isOpen: boolean;
  onClose: () => void;
}

const MenuSheet = ({ isOpen, onClose }: MenuSheetProps) => {
  if (!isOpen) return null;

  return (
    <>
      <div
        className="fixed inset-0 z-[90] bg-black/50"
        onClick={onClose}
      />
      <div className="fixed top-0 right-0 bottom-0 z-[95] w-80 max-w-[85vw] bg-white border-l border-gray-200 shadow-xl">
        <div className="flex items-center justify-between h-14 px-4 border-b border-gray-200">
          <h2 className="font-semibold text-gray-800">Menú</h2>
          <button
            onClick={onClose}
            className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors"
            aria-label="Cerrar menú"
          >
            <X className="w-5 h-5 text-gray-600" />
          </button>
        </div>

        <div className="p-4 space-y-2">
          <nav className="space-y-1">
            <Link to="/" className="block px-3 py-2 rounded hover:bg-gray-50">Inicio</Link>
            <Link to="/soporte-vital" className="block px-3 py-2 rounded hover:bg-gray-50">Soporte Vital</Link>
            <Link to="/patologias" className="block px-3 py-2 rounded hover:bg-gray-50">Patologías</Link>
            <Link to="/escena" className="block px-3 py-2 rounded hover:bg-gray-50">Escena</Link>
            <Link to="/herramientas" className="block px-3 py-2 rounded hover:bg-gray-50">Herramientas</Link>
            <Link to="/farmacos" className="block px-3 py-2 rounded hover:bg-gray-50">Fármacos</Link>
            <Link to="/manual" className="block px-3 py-2 rounded hover:bg-gray-50">Manual Completo</Link>
            <Link to="/guia-refuerzo" className="block px-3 py-2 rounded hover:bg-gray-50">Guías de Refuerzo</Link>
            <Link to="/telefono" className="block px-3 py-2 rounded hover:bg-gray-50">Protocolos Telefonicos</Link>
            <Link to="/comunicacion" className="block px-3 py-2 rounded hover:bg-gray-50">Guiones de Comunicación</Link>
            <Link to="/material" className="block px-3 py-2 rounded hover:bg-gray-50">Material y Checklists</Link>
            <Link to="/favoritos" className="block px-3 py-2 rounded hover:bg-gray-50">Favoritos</Link>
            <Link to="/historial" className="block px-3 py-2 rounded hover:bg-gray-50">Historial</Link>
            <Link to="/ajustes" className="block px-3 py-2 rounded hover:bg-gray-50">Ajustes</Link>
            <Link to="/galeria" className="block px-3 py-2 rounded hover:bg-gray-50">Galería</Link>
            <Link to="/acerca" className="block px-3 py-2 rounded hover:bg-gray-50">Acerca de</Link>
          </nav>
        </div>

        <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200">
          <p className="text-xs text-gray-500 text-center">
            codigo0 v1.2.0
          </p>
          <p className="text-xs text-gray-500 text-center mt-1">
            0 Errores. 0 Dudas.
          </p>
        </div>
      </div>
    </>
  );
};

export default MenuSheet;