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

interface InputProps
  extends React.InputHTMLAttributes<HTMLInputElement>,
  SystemProps
{ }

const Input: ForwardRefRenderFunction<HTMLInputElement, InputProps> =
  ({ style, ...props }, ref) => {
    style = {
      ...inputElStyle,
      ...style,
    };

    const systemStyle = getSystemStyle(props, style);

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

export default React.forwardRef(Input);