import React from 'react';
import { Box, Text } from 'ink';
import TextInput from 'ink-text-input';

interface CommandBarProps {
    value: string;
    onChange: (v: string) => void;
    onSubmit: (v: string) => void;
    secureMode: boolean;
}

export function CommandBar({ value, onChange, onSubmit, secureMode }: CommandBarProps) {
    return (
        <Box
            borderStyle="single"
            borderColor={secureMode ? 'red' : 'cyan'}
            paddingX={1}
        >
            <Text bold color={secureMode ? 'red' : 'cyan'}>
                {secureMode ? 'SECURE ▶ ' : 'INSTRUCT ▶ '}
            </Text>
            <TextInput
                value={value}
                onChange={onChange}
                onSubmit={onSubmit}
                placeholder={secureMode
                    ? "Type 'yes' to confirm, anything else to abort..."
                    : "Ask Frank... ('status', 'refresh', or natural language)"
                }
            />
        </Box>
    );
}