import React from 'react';

import TextareaBox from '../TextareaBox';
import Typography from '../Typography';

import { ContentWrapper } from './styled';

type Props = {
  t: (key: string) => string;
  onChange: (value: string) => void;
  value?: string;
};

const TextBox: React.FC<Props> = ({
  t,
  onChange,
  value,
}: Props): React.ReactElement => (
  <>
    <ContentWrapper>
      <Typography variant="subtitle">{t('text')}</Typography>
    </ContentWrapper>
    <TextareaBox onChange={onChange} value={value} shouldFitContainer />
  </>
);

TextBox.defaultProps = {
  value: '',
};

export default TextBox;