import { clsx } from 'clsx';
import { forwardRef } from 'react';

import { Merge } from '../utils';
import { inputClassNameBase } from './_common';
import { useInputAttributes } from './contexts';

export interface TextAreaProps extends Merge<
  React.ComponentPropsWithRef<'textarea'>,
  {
    'aria-invalid'?: boolean;
  }
> {}

export const TextArea = forwardRef(function TextArea(
  { className, ...restProps }: TextAreaProps,
  reference: React.ForwardedRef<HTMLTextAreaElement | null>,
) {
  const inputAttributes = useInputAttributes();

  return (
    <textarea
      ref={reference}
      className={clsx(className, inputClassNameBase(), 'np-text-area')}
      {...inputAttributes}
      {...restProps}
    />
  );
});