import React from 'react';
import { useTool } from '../context/ToolContext';

const MENU = [
  { id: 'chat', label: '채팅' },
  { id: 'tools', label: '도구' },
  { id: 'lecture', label: '강의' },
  { id: 'ai_news', label: 'AI뉴스' },
  { id: 'qna', label: '질의응답' },
];

export default function Sidebar({ current, onChange }) {
  const { setSelectedTool } = useTool();
  return (
    <aside className="sidebar">
      <div className="logo" onClick={() => { setSelectedTool(null); try { localStorage.removeItem('selectedToolId'); } catch {}; onChange('chat'); }} style={{cursor:'pointer'}}>엔큐톡</div>
      <nav className="menu">
        <ul>
          {MENU.map((item) => (
            <li
              key={item.id}
              className={`menu-item ${current === item.id ? 'active' : ''}`}
              onClick={() => { onChange(item.id); }}
            >
              {item.label}
            </li>
          ))}
        </ul>
      </nav>
    </aside>
  );
}