import { Button } from './Button';
import './Sidebar.css';

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

export function Sidebar({ onModuleChange, activeModule }: SidebarProps) {
  return (
    <aside class="sidebar">
      <div class="sidebar-header">
        <h2 class="sidebar-title">Modulos</h2>
      </div>
      <div class="sidebar-nav">
        <Button
          variant={activeModule === 'verificador' ? 'primary' : 'secondary'}
          onClick={() => onModuleChange('verificador')}
          className="sidebar-btn"
        >
          Verificador
        </Button>
        <Button
          variant={activeModule === 'flashcards' ? 'primary' : 'secondary'}
          onClick={() => onModuleChange('flashcards')}
          className="sidebar-btn"
        >
          Flashcards
        </Button>
        <Button
          variant={activeModule === 'revisao-flashcards' ? 'primary' : 'secondary'}
          onClick={() => onModuleChange('revisao-flashcards')}
          className="sidebar-btn"
        >
          Revisao Flashcards
        </Button>
        <Button
          variant={activeModule === 'revisao-espacada' ? 'primary' : 'secondary'}
          onClick={() => onModuleChange('revisao-espacada')}
          className="sidebar-btn"
        >
          Revisao Espacada
        </Button>
      </div>
    </aside>
  );
}
