import { forwardRef } from "react";
import { Label } from "../Label";

interface TextareaProps
  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
  wrapperClassName?: string;
  label?: string;
  labelClassName?: string;
}

const TextArea = forwardRef<HTMLTextAreaElement, TextareaProps>(
  (props, ref) => {
    let { wrapperClassName, label, labelClassName, ...rest } = props;
    return (
      <div className={`pt-4 gap-1 flex flex-col ${wrapperClassName}`}>
        <Label
          className={`font-manrope-medium text-sm text-[#344054] ${labelClassName}`}
          htmlFor={rest?.name}
        >
          {label}
        </Label>
        <textarea
          className="w-full font-manrope-medium text-base text-[#101828] rounded-lg border border-[#72CAC2] px-3.5 py-3 bg-white"
          ref={ref}
          {...rest}
        ></textarea>
      </div>
    );
  }
);

export { TextArea };
