import React from 'react';
import { RemoteProject, ActiveCommand } from '../api/types';
import { ProjectCard } from './ProjectCard';

interface ProjectsPanelProps {
  projects: RemoteProject[];
  selectedProjectId: string | null;
  onSelectProject: (projectId: string | null) => void;
  onGitSync: (projectId: string) => void;
  onDelete: (projectId: string) => void;
  isLoading: boolean;
  /** Whether git/sync is available (resolve_command configured on server) */
  syncAvailable: boolean;
  /** All active commands across projects */
  activeCommands: ActiveCommand[];
}

export function ProjectsPanel({
  projects,
  selectedProjectId,
  onSelectProject,
  onGitSync,
  onDelete,
  isLoading,
  syncAvailable,
  activeCommands,
}: ProjectsPanelProps) {
  return (
    <div className="space-y-2 p-3">
      {projects.length === 0 ? (
        <div className="flex items-center justify-center p-6">
          <p className="text-sm text-[#52525b]">No projects configured</p>
        </div>
      ) : (
        projects.map((project) => (
          <ProjectCard
            key={project.id}
            project={project}
            isSelected={selectedProjectId === project.id}
            onSelect={onSelectProject}
            onGitSync={onGitSync}
            onDelete={onDelete}
            isLoading={isLoading}
            syncAvailable={syncAvailable}
            activeCommands={activeCommands.filter((cmd) => cmd.project_id === project.id)}
          />
        ))
      )}
    </div>
  );
}
