import s from './text-area.module.scss';
import { DetailedHTMLProps, ReactNode, TextareaHTMLAttributes } from 'react';
import { clsx } from 'clsx';

type TextAreaProps = {
  className?: string;
  children?: ReactNode;
  variant?: 'default' | 'ghost';
  fullWidth?: boolean;
} & DetailedHTMLProps<
  TextareaHTMLAttributes<HTMLTextAreaElement>,
  HTMLTextAreaElement
>;

export default function TextArea({
  className,
  children,
  variant = 'default',
  fullWidth = false,
  ...props
}: TextAreaProps) {
  return (
    <div className={clsx(s.Container, fullWidth && s.Container_fullWidth)}>
      <textarea
        {...props}
        className={clsx(className, s.Area, s['Area_' + variant])}
      >
        {children}
      </textarea>
    </div>
  );
}