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

import { ScrollArea } from '../scroll-area';
import { forwardRef } from '../utils/react';
import * as css from './textarea.css';

/*-- Types --*/

export interface TextareaProps extends css.TextareaVariants {}

/*-- Main --*/

export const Textarea = forwardRef<'textarea', TextareaProps>(function Textarea(
  { as = 'textarea', className, children, full, resize, ...rest },
  ref,
) {
  return (
    <ScrollArea
      ref={ref}
      as={as}
      className={clsx(className, css.textarea({ full, resize }))}
      {...rest}
    >
      {children}
    </ScrollArea>
  );
});