import React from 'react';
import { Box } from 'ink';
import { StepItem } from './StepItem.js';
import type { Step } from '../types.js';
interface StepListProps {
steps: Step[];
selectedIndex: number;
}
function isStepBlocked(step: Step, allSteps: Step[]): boolean {
if (!step.dependsOn || step.dependsOn.length === 0) {
return false;
}
return step.dependsOn.some((depId) => {
const depStep = allSteps.find((s) => s.id === depId);
return depStep && depStep.status !== 'completed';
});
}
export function StepList({ steps, selectedIndex }: StepListProps) {
return (
<Box flexDirection="column" marginY={1}>
{steps.map((step, index) => (
<StepItem
key={step.id}
step={step}
isSelected={index === selectedIndex}
isBlocked={isStepBlocked(step, steps)}
/>
))}
</Box>
);
}
