import { TextArea as AriaTextArea, TextAreaProps as AriaTextAreaProps } from 'react-aria-components';

import { twMerge } from 'tailwind-merge';

interface TextAreaProps extends Omit<AriaTextAreaProps, 'className'> {
  className?: string;
}

export const TextArea = (props: TextAreaProps) => {
  const { className, ...restProps } = props;
  return (
    <AriaTextArea
      {...restProps}
      className={twMerge(
        'block px-3 py-2.5 text-sm text-dabeeo-black-34 border border-dabeeo-gray-be data-[hovered=true]:border-dabeeo-black-34 data-[focused=true]:text-dabeeo-black-34 data-focused:border-dabeeo-black-34 outline-0 resize-none',
        'read-only:bg-dabeeo-yellow-secondary read-only:data-[hovered=true]:border-dabeeo-gray-be read-only:data-[focused=true]:border-dabeeo-gray-be',
        className
      )}
    />
  );
};