import React from 'react';
import { Box, Text } from 'ink';
import type { Step } from '../types.js';
interface StepItemProps {
step: Step;
isSelected: boolean;
isBlocked: boolean;
}
const STATUS_ICONS: Record<string, string> = {
pending: '[ ]',
completed: '[✓]',
skipped: '[-]',
};
const TYPE_BADGES: Record<string, string> = {
action: 'ACT',
verification: 'VER',
acknowledgment: 'ACK',
confirmation: 'CFM',
};
export function StepItem({ step, isSelected, isBlocked }: StepItemProps) {
const statusIcon = STATUS_ICONS[step.status] ?? '[ ]';
const typeBadge = TYPE_BADGES[step.type] ?? 'ACT';
const getStatusColor = () => {
if (step.status === 'completed') return 'green';
if (step.status === 'skipped') return 'gray';
return undefined;
};
const getTitleColor = () => {
if (step.status === 'completed') return 'green';
if (step.status === 'skipped') return 'gray';
if (isBlocked) return 'gray';
if (isSelected) return 'magenta';
return undefined;
};
return (
<Box flexDirection="column">
<Box>
<Text color={isSelected ? 'magenta' : undefined}>
{isSelected ? '▸ ' : ' '}
</Text>
<Text color={getStatusColor()}>{statusIcon} </Text>
<Text color="gray">[{typeBadge}] </Text>
<Text
color={getTitleColor()}
dimColor={isBlocked}
strikethrough={step.status === 'skipped'}
>
{step.title}
</Text>
{!step.required && (
<Text color="gray" dimColor>
{' '}
(optional)
</Text>
)}
{isBlocked && step.status === 'pending' && (
<Text color="yellow" dimColor>
{' '}
(blocked)
</Text>
)}
</Box>
{isSelected && step.description && (
<Box marginLeft={4}>
<Text dimColor italic>
{step.description}
</Text>
</Box>
)}
{step.notes && (
<Box marginLeft={4}>
<Text color="cyan" dimColor={!isSelected}>
💬 {step.notes}
</Text>
</Box>
)}
</Box>
);
}
