import React, { TextareaHTMLAttributes, ForwardRefRenderFunction } from 'react';
import { getSystemStyle, SystemProps } from '../utils/systemProps';
import inputElStyle from '../utils/inputElementStyle';

interface TextAreaProps
  extends TextareaHTMLAttributes<HTMLTextAreaElement>,
  SystemProps
{ }

const TextArea: ForwardRefRenderFunction<HTMLTextAreaElement, TextAreaProps> = 
  ({ style, ...props }, ref) => {
    style = {
      ...inputElStyle,
      ...style,
    };

    const systemStyle = getSystemStyle(props, style);

    return <textarea ref={ref} style={systemStyle} {...props} />;
  };

export default React.forwardRef(TextArea);
