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

interface FormInputProps {
  label: string;
  value: string;
  onChange: (value: string) => void;
  onSubmit?: (value: string) => void;
  focus: boolean;
  placeholder?: string;
  mask?: string;
  error?: string;
}

export function FormInput({ label, value, onChange, onSubmit, focus, placeholder, mask, error }: FormInputProps) {
  return (
    <Box flexDirection="column">
      <Text color={focus ? 'cyan' : 'gray'}>{label}</Text>
      <Box>
        <Text color="gray"> › </Text>
        <TextInput
          value={value}
          onChange={onChange}
          {...(onSubmit !== undefined ? { onSubmit } : {})}
          focus={focus}
          {...(placeholder !== undefined ? { placeholder } : {})}
          {...(mask !== undefined ? { mask } : {})}
        />
      </Box>
      {error !== undefined && <Text color="red">⚠ {error}</Text>}
    </Box>
  );
}