import type { TextareaHTMLAttributes, ReactNode } from "react";
import type { UseFormRegisterReturn } from "react-hook-form";

interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
  icon?: ReactNode;
  className?: string;
  label?: string;
  error?: string;
  register?: UseFormRegisterReturn;
  required?: boolean;
}

export default function Textarea({
  placeholder,
  icon,
  className = "",
  label,
  error,
  register,
  required = false,
  ...props
}: TextareaProps) {
  return (
    <div className="flex flex-col gap-0.5 xl:gap-1">
      {label && (
        <label className="text-[13px] 2xl:text-sm font-medium text-heading">
          {label}
          {required && <span className="ml-1 text-danger">*</span>}
        </label>
      )}
      <div className="relative">
        {icon && (
          <span className="pointer-events-none absolute left-4 top-3 text-gray-400">
            {icon}
          </span>
        )}
        <textarea
          placeholder={placeholder}
          className={` min-h-24 2xl:min-h-28 w-full rounded-md 2xl:rounded-xl border
            ${error ? "border-red-400" : "border-[#E5DFFF]"}
            bg-white
            ${icon ? "pl-10" : "pl-4"}
            pr-4 py-2.5 font-body text-sm 2xl:text-base text-heading outline-none transition-all placeholder:text-gray-400 focus:border-[#8B5CF6] focus:ring-2 focus:ring-[#8B5CF6]/10
            ${className}
          `}
          {...register}
          {...props}
        />
      </div>
      {error && <span className="text-xs text-danger">{error}</span>}
    </div>
  );
}