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

import {styles} from './styles';

interface Props {
  value: string;
  onChangeText: (text: string) => void;
}

function CommentInput({value, onChangeText}: Props) {
  const {t} = useTranslation();
  const {theme} = useTheme();

  return (
    <View
      style={[
        styles.container,
        {backgroundColor: theme.background.elements.default},
      ]}>
      <InputTextArea
        label={t('people_experience.optional_comment')}
        placeholder={t('general.write_something')}
        value={value}
        maxLength={4000}
        onChangeText={onChangeText}
      />
    </View>
  );
}

export default CommentInput;