import { Link, useLocation } from 'react-router-dom';

interface BoardSidebarProps {
  boardId: string;
}

export function BoardSidebar({ boardId }: BoardSidebarProps) {
  const location = useLocation();

  const menuItems = [
    { id: 'epics', label: 'Epics', icon: '📋', path: `/boards/${boardId}/epics` },
    { id: 'wikis', label: 'Wikis', icon: '📚', path: `/boards/${boardId}/wikis` },
    { id: 'history', label: 'History', icon: '📜', path: `/boards/${boardId}/history` },
  ];

  return (
    <div className="w-64 bg-gray-800 rounded-lg p-4 border border-gray-700 h-fit sticky top-4">
      <h3 className="text-white font-bold text-lg mb-4">Board Menu</h3>
      <nav className="space-y-2">
        {menuItems.map((item) => {
          const isActive = location.pathname === item.path;
          return (
            <Link
              key={item.id}
              to={item.path}
              className={`flex items-center gap-3 px-3 py-2 rounded-md transition-colors ${
                isActive
                  ? 'bg-blue-600 text-white'
                  : 'text-gray-300 hover:bg-gray-700 hover:text-white'
              }`}
            >
              <span className="text-lg">{item.icon}</span>
              <span className="font-medium">{item.label}</span>
            </Link>
          );
        })}
      </nav>
    </div>
  );
}