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

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  icon?: ReactNode;
  rightIcon?: ReactNode;
  className?: string;
  label?: string;
  error?: string;
  register?: UseFormRegisterReturn;
  required?: boolean;
}

export default function Input({
  type = "text",
  placeholder,
  icon,
  rightIcon,
  className = "",
  label,
  error,
  register,
  required = false,
  ...props
}: InputProps) {
  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-1/2 -translate-y-1/2 text-gray-400">
            {icon}
          </span>
        )}

        <input
          type={type}
          placeholder={placeholder}
          className={` h-10 2xl:h-12 w-full rounded-md 2xl:rounded-xl border
            ${error ? "border-red-400" : "border-[#E5DFFF]"}
            bg-white
            ${icon ? "pl-10" : "pl-4"}
            ${rightIcon ? "pr-18" : "pr-4"} 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}
        />

        {rightIcon && (
          <span className="absolute right-4 top-1/2 leading-none h-4.5 z-1 -translate-y-1/2 cursor-pointer">
            {rightIcon}
          </span>
        )}
      </div>

      {error && (
        <span className="text-xs text-danger">
          {error}
        </span>
      )}
    </div>
  );
}