import { FolderKanban } from 'lucide-react';
import { useLocation, useNavigate } from 'react-router-dom';
import { cn } from '@/lib/utils';

type LearningSidebarProps = {
  sidebarCollapsed: boolean;
};

export function LearningSidebar({ sidebarCollapsed }: LearningSidebarProps) {
  const navigate = useNavigate();
  const location = useLocation();
  const active = location.pathname === '/learning' || location.pathname.startsWith('/learning/project/');

  return (
    <nav data-testid="sidebar-learning-navigation" aria-label="AI 学习导航" className="px-1 py-1">
      <button
        type="button"
        aria-label="学习项目"
        aria-current={active ? 'page' : undefined}
        onClick={() => navigate('/learning')}
        className={cn(
          'motion-press flex min-h-10 w-full items-center gap-2 rounded-lg px-2 py-2 text-left text-sm font-semibold transition-colors duration-100',
          active ? 'bg-brand-soft text-foreground' : 'text-foreground hover:bg-surface-subtle',
          sidebarCollapsed && 'justify-center px-0',
        )}
      >
        <FolderKanban className="h-4 w-4 shrink-0 text-brand" />
        {!sidebarCollapsed ? <span>学习项目</span> : null}
      </button>
      {!sidebarCollapsed ? (
        <p className="px-2 pt-3 text-xs leading-5 text-muted-foreground">
          阅读项目说明并下载到电脑实践。
        </p>
      ) : null}
    </nav>
  );
}