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;
  error?: string | boolean;
  errorTextColor?: string;
} & DetailedHTMLProps<
  TextareaHTMLAttributes<HTMLTextAreaElement>,
  HTMLTextAreaElement
>;

const TextArea = forwardRef(function TextArea(
  {
    className,
    children,
    variant = 'default',
    fullWidth = false,
    error = false,
    errorTextColor,
    ...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],
          error && s.Area_error,
        )}
      >
        {children}
      </textarea>
      {error && (
        <span className={s.Error} style={{ color: errorTextColor }}>
          {error}
        </span>
      )}
    </div>
  );
});

export default TextArea;