import type { Module, ModuleId } from '@/shared/types/app';
import { getSidebarIcon } from '@/components/sidebar/SidebarIcons';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

interface SidebarNavigationProps {
  readonly modules: readonly Module[];
  readonly currentModule: ModuleId;
  readonly collapsed: boolean;
  readonly onSelectModule: (id: ModuleId) => void;
}

export function SidebarNavigation({
  modules,
  currentModule,
  collapsed,
  onSelectModule,
}: SidebarNavigationProps) {
  return (
    <nav className="flex-1 py-3 overflow-y-auto scrollbar-thin scrollbar-thumb-slate-700">
      <div className="px-3 space-y-0.5">
        {modules.map((module) => {
          const isActive = currentModule === module.id;

          return (
            <Button
              key={module.id}
              type="button"
              variant="ghost"
              onClick={() => onSelectModule(module.id)}
              className={cn(
                'w-full flex items-center justify-start gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all duration-200',
                isActive
                  ? 'bg-gradient-to-r from-violet-500/20 to-amber-500/10 text-white shadow-sm border border-violet-500/20'
                  : 'text-slate-400 hover:bg-slate-800/80 hover:text-slate-200',
              )}
              title={collapsed ? module.name : undefined}
            >
              <span className={cn('flex-shrink-0', isActive ? 'text-violet-400' : 'text-slate-500')}>
                {getSidebarIcon(module.icon)}
              </span>
              {!collapsed && <span className="truncate">{module.name}</span>}
            </Button>
          );
        })}
      </div>
    </nav>
  );
}
