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

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

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

export default TextArea;