import cx from 'classnames';
import React from 'react';

import css from './textarea-auto-height.module.css';

// -- TYPES

export interface ITextAreaAutoHeightProps
  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'className'> {
  className: {
    wrapper?: string;
    textarea?: string;
  };
}

// -- MAIN

function TextAreaAutoHeight({
  className,
  value,
  ...textareaAttrs
}: ITextAreaAutoHeightProps) {
  const cnWrapper = cx(className.wrapper, css.wrapper);
  const cnTextarea = cx(className.textarea, css.textarea);

  return (
    <div className={cnWrapper}>
      <div className={css.value}>
        {value}
        {'\n'}
      </div>
      <textarea className={cnTextarea} value={value} {...textareaAttrs} />
    </div>
  );
}

TextAreaAutoHeight.defaultProps = {
  className: {},
};

export default TextAreaAutoHeight;