import React from 'react';
import { Box, Text } from 'ink';
interface FooterProps {
completedCount: number;
totalCount: number;
status: string;
feedbackMode?: boolean;
}
export function Footer({ completedCount, totalCount, status, feedbackMode }: FooterProps) {
const isComplete = status === 'completed';
const isCancelled = status === 'cancelled';
return (
<Box flexDirection="column" marginTop={1}>
<Box>
<Text dimColor>{'─'.repeat(50)}</Text>
</Box>
<Box justifyContent="space-between" marginTop={1}>
<Box>
<Text color={isComplete ? 'green' : isCancelled ? 'red' : 'yellow'}>
{completedCount}/{totalCount} completed
</Text>
{isComplete && <Text color="green"> ✓ Done!</Text>}
{isCancelled && <Text color="red"> ✗ Cancelled</Text>}
</Box>
</Box>
{status === 'active' && !feedbackMode && (
<Box marginTop={1}>
<Text dimColor>
[↑↓] Navigate [Space/Enter] Toggle [s] Skip [f] Feedback [c] Cancel
</Text>
</Box>
)}
{feedbackMode && (
<Box marginTop={1}>
<Text dimColor>
[Enter] Save [Esc] Cancel
</Text>
</Box>
)}
</Box>
);
}
