import React from 'react';
import {useTranslation} from 'react-i18next';
import {InputTextArea, Typography} from '@components';
import {useTheme} from '@shared/theme';

interface Props {
  value?: string;
  onChangeValue?: (value?: string) => void;
  disabled?: boolean;
}

function TextInput({value = '', onChangeValue, disabled}: Props) {
  const {t} = useTranslation();
  const {theme} = useTheme();

  return disabled ? (
    <Typography color={theme.text.neutral.lighter} fontStyle="italic">
      {value || t('general.empty')}
    </Typography>
  ) : onChangeValue ? (
    <InputTextArea
      value={value}
      onChangeText={onChangeValue}
      placeholder={t('general.write_something')}
      maxLength={4000}
      showCounter
    />
  ) : null;
}

export default TextInput;