import type { PipelineColumn } from "@codewalk-district/shared";
import { PipelineStageColumn } from "./PipelineStageColumn";
import type { SerializedTask } from "@/components/TaskRow";

interface PipelineGraphProps {
  columns: PipelineColumn<{
    id: string;
    name: string;
    status: string;
    createdAt: string | Date;
  }>[];
  tasksByPhase: Record<string, SerializedTask[]>;
}

export function PipelineGraph({ columns, tasksByPhase }: PipelineGraphProps) {
  return (
    <div className="overflow-x-auto pb-4">
      <div className="flex min-w-max items-start gap-0">
        {columns.map((column, idx) => (
          <div key={column.depth} className="flex items-start">
            {/* Connector arrow between columns */}
            {idx > 0 && (
              <div className="flex items-center self-center py-4">
                <div className="h-px w-6 bg-border" />
                <div className="h-0 w-0 border-y-[4px] border-l-[6px] border-y-transparent border-l-border" />
              </div>
            )}
            <PipelineStageColumn
              phases={column.phases}
              tasksByPhase={tasksByPhase}
            />
          </div>
        ))}
      </div>
    </div>
  );
}
