import { StatusBadge } from "@/components/StatusBadge";
import { cn } from "@/lib/utils";

interface PhaseSidebarItemProps {
  phase: {
    id: string;
    name: string;
    status: string;
  };
  displayIndex: number;
  taskCount: { complete: number; total: number };
  dependencies: string[];
  isSelected: boolean;
  onClick: () => void;
}

export function PhaseSidebarItem({
  phase,
  displayIndex,
  taskCount,
  dependencies,
  isSelected,
  onClick,
}: PhaseSidebarItemProps) {
  return (
    <button
      className={cn(
        "flex w-full flex-col gap-0.5 rounded-md px-3 py-2 text-left transition-colors",
        isSelected
          ? "border-l-2 border-primary bg-accent"
          : "border-l-2 border-transparent hover:bg-accent/50",
      )}
      onClick={onClick}
    >
      <div className="flex items-center gap-2">
        <span className="min-w-0 flex-1 truncate text-sm font-medium">
          Phase {displayIndex}: {phase.name}
        </span>
        <StatusBadge status={phase.status} className="shrink-0 text-[10px]" />
      </div>

      <div className="flex items-center gap-2 text-xs text-muted-foreground">
        <span>
          {taskCount.total === 0
            ? "Needs decomposition"
            : `${taskCount.complete}/${taskCount.total} tasks`}
        </span>
      </div>

      {dependencies.length > 0 && (
        <div className="text-xs text-muted-foreground">
          depends on: {dependencies.join(", ")}
        </div>
      )}
    </button>
  );
}
