import React from 'react';
import { 
  LayoutDashboard, 
  HardDrive, 
  Layers, 
  RotateCcw, 
  FileText, 
  ShieldCheck, 
  Server
} from 'lucide-react';

interface SidebarProps {
  currentTab: string;
  setCurrentTab: (tab: string) => void;
  isWsConnected: boolean;
}

export const Sidebar: React.FC<SidebarProps> = ({ currentTab, setCurrentTab, isWsConnected }) => {
  const menuItems = [
    { id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
    { id: 'clients', label: 'Clientes Windows', icon: HardDrive },
    { id: 'jobs', label: 'Trabajos de Backup', icon: Layers },
    { id: 'restore', label: 'Explorador & Restore', icon: RotateCcw },
    { id: 'events', label: 'Auditoría & Logs', icon: FileText },
  ];

  return (
    <aside className="sidebar">
      <div className="brand">
        <div className="brand-icon">
          <ShieldCheck size={24} />
        </div>
        <div className="brand-text">
          <h1>OnEver Drive</h1>
          <span>Proxmox Edition</span>
        </div>
      </div>

      <nav className="nav-links">
        {menuItems.map((item) => {
          const Icon = item.icon;
          const isActive = currentTab === item.id;
          return (
            <button
              key={item.id}
              className={`nav-btn ${isActive ? 'active' : ''}`}
              onClick={() => setCurrentTab(item.id)}
            >
              <Icon size={18} />
              <span>{item.label}</span>
            </button>
          );
        })}
      </nav>

      <div className="sidebar-footer">
        <div className="ws-status-badge">
          <div className={`pulse-dot ${isWsConnected ? '' : 'offline'}`} />
          <span>{isWsConnected ? 'Telemetría en Vivo' : 'Reconectando WS...'}</span>
        </div>
        <div style={{ fontSize: '0.72rem', color: 'var(--text-dim)', textAlign: 'center', marginTop: '4px' }}>
          v1.0.0 • Proxmox LXC
        </div>
      </div>
    </aside>
  );
};