import React from 'react';

import TextField from '../TextField';
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>
    <TextField
      variant="multiline"
      onChange={onChange}
      value={value}
      shouldFitContainer
    />
  </>
);

export default TextBox;
