import { X, Star, History, Settings, Info, Share2, ClipboardCheck, Phone, MessageSquare, BookOpen } from 'lucide-react';
import { Link } from 'react-router-dom';

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

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

  const menuItems = [
    { icon: <BookOpen className="w-5 h-5" />, label: 'Manual Completo', path: '/manual', onClick: onClose },
    { icon: <Phone className="w-5 h-5" />, label: 'Protocolos Transtelefónicos', path: '/telefono', onClick: onClose },
    { icon: <MessageSquare className="w-5 h-5" />, label: 'Guiones de Comunicación', path: '/comunicacion', onClick: onClose },
    { icon: <ClipboardCheck className="w-5 h-5" />, label: 'Checklists Material', path: '/material', onClick: onClose },
    { icon: <Star className="w-5 h-5" />, label: 'Favoritos', onClick: () => {} },
    { icon: <History className="w-5 h-5" />, label: 'Historial', onClick: () => {} },
    { icon: <Share2 className="w-5 h-5" />, label: 'Compartir App', onClick: () => {} },
    { icon: <Settings className="w-5 h-5" />, label: 'Ajustes', onClick: () => {} },
    { icon: <Info className="w-5 h-5" />, label: 'Acerca de', onClick: () => {} },
  ];

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

        <div className="p-4 space-y-2">
          {menuItems.map((item, index) => {
            const content = (
              <>
                <span className="text-muted-foreground">{item.icon}</span>
                <span className="font-medium text-foreground">{item.label}</span>
              </>
            );

            if (item.path) {
              return (
                <Link
                  key={index}
                  to={item.path}
                  onClick={item.onClick}
                  className="w-full flex items-center gap-4 p-4 rounded-xl hover:bg-muted transition-colors text-left"
                >
                  {content}
                </Link>
              );
            }

            return (
              <button
                key={index}
                onClick={item.onClick}
                className="w-full flex items-center gap-4 p-4 rounded-xl hover:bg-muted transition-colors text-left"
              >
                {content}
              </button>
            );
          })}
        </div>

        <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-border">
          <p className="text-2xs text-muted-foreground text-center">
            EMERGES TES v1.0.0
          </p>
          <p className="text-2xs text-muted-foreground text-center mt-1">
            Guía de Protocolos para TES
          </p>
        </div>
      </div>
    </>
  );
};

export default MenuSheet;