import React from 'react';

import { TextAreaProps } from './text-area.types';
import * as Styles from './text-area.styles';

const TextArea = ({ data, value, onChange, height }: TextAreaProps): JSX.Element => {
  const onFieldChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => onChange(e.target.value, data.id);

  return (
    <Styles.TextArea
      name={data.id}
      placeholder={`${data.label}${data.required ? ' *' : ''}`}
      onChange={onFieldChange}
      height={height || 150}
      rows={4}
      value={value}
    />
  );
};

export default TextArea;