import { useState } from 'react';
import { LayoutDashboard, FileText, Database, Shield, Zap, Settings, Play, HelpCircle } from 'lucide-react';

const navItems = [
  { id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
  { id: 'parser', label: 'Notebook Parser', icon: FileText },
  { id: 'knowledge', label: 'Knowledge Base', icon: Database },
  { id: 'board', label: 'Board Validator', icon: Shield },
  { id: 'training', label: 'Training & Submit', icon: Play },
  { id: 'settings', label: 'Settings', icon: Settings },
  { id: 'help', label: 'Help & Guide', icon: HelpCircle },
];

export default function Sidebar({ activePage, onNavigate }) {
  return (
    <aside className="w-64 bg-white shadow-lg rounded-lg p-4 mr-6">
      <nav className="sidebar-nav">
        {navItems.map(({ id, label, icon: Icon }) => (
          <div
            key={id}
            onClick={() => onNavigate(id)}
            className={`nav-item ${activePage === id ? 'active' : ''}`}
          >
            <div className="flex items-center">
              <Icon className="w-5 h-5 mr-3" />
              <span>{label}</span>
            </div>
          </div>
        ))}
      </nav>
    </aside>
  );
}