import { Game } from '../types';
import './Sidebar.css';

interface SidebarProps {
  games: Game[];
  activeGameId: string;
  onSelectGame: (id: string) => void;
  onAddGame: () => void;
  onDeleteGame: (id: string) => void;
}

export default function Sidebar({
  games,
  activeGameId,
  onSelectGame,
  onAddGame,
  onDeleteGame,
}: SidebarProps) {
  return (
    <aside className="sidebar">
      <div className="sidebar-brand">
        <h1 className="sidebar-title">下注助手</h1>
        <p className="sidebar-subtitle">专业分析工具</p>
      </div>

      <nav className="sidebar-nav">
        {games.map((game) => (
          <div
            key={game.id}
            className={`nav-item ${activeGameId === game.id ? 'active' : ''}`}
            onClick={() => onSelectGame(game.id)}
          >
            <span className="nav-icon">{game.icon}</span>
            <span className="nav-label">{game.name}</span>
            {games.length > 1 && (
              <button
                className="nav-delete"
                onClick={(e) => {
                  e.stopPropagation();
                  onDeleteGame(game.id);
                }}
                title="删除游戏"
              >
                ×
              </button>
            )}
          </div>
        ))}

        <button className="nav-add-btn" onClick={onAddGame}>
          <span className="nav-add-icon">+</span>
          <span className="nav-label">添加游戏</span>
        </button>
      </nav>

      <div className="sidebar-footer">
        <div className="version-badge">v1.0.0</div>
      </div>
    </aside>
  );
}
