import './Sidebar.css';

interface SidebarProps {
  onModuleChange: (module: 'home' | 'verificador' | 'flashcards' | 'revisao-flashcards' | 'revisao-espacada') => void;
  activeModule: 'home' | 'verificador' | 'flashcards' | 'revisao-flashcards' | 'revisao-espacada';
}

const NAV_ITEMS: { module: SidebarProps['activeModule']; icon: string; label: string }[] = [
  { module: 'verificador', icon: '\u2713', label: 'Verificador' },
  { module: 'flashcards', icon: '\u25A6', label: 'Flashcards' },
  { module: 'revisao-flashcards', icon: '\u25B3', label: 'Revisão de Flashcards' },
  { module: 'revisao-espacada', icon: '\u25CB', label: 'Revisão espaçada' },
];

export function Sidebar({ onModuleChange, activeModule }: SidebarProps) {
  return (
    <aside class="sidebar">
      <button class="brand" type="button" onClick={() => onModuleChange('home')} aria-label="Ir para a página inicial">
        <div class="brand-mark">
          <img src="/assets/mindforge.png" alt="M" />
        </div>
        <h1>Mindforge</h1>
      </button>
      <div class="nav-section-title">Módulos</div>
      <nav class="nav-list">
        {NAV_ITEMS.map(({ module, icon, label }) => (
          <button
            key={module}
            class={`nav-item${activeModule === module ? ' active' : ''}`}
            onClick={() => onModuleChange(module)}
          >
            <span class="nav-icon">{icon}</span>
            <span class="nav-text">{label}</span>
          </button>
        ))}
      </nav>
    </aside>
  );
}
