import type { UseFormRegisterReturn } from "react-hook-form";
import { fieldBorderClass } from "@/lib/upload/fileUtils";

type AuthPasswordInputProps = Readonly<{
  id: string;
  show: boolean;
  onToggleShow: () => void;
  registration: UseFormRegisterReturn;
  hasError: boolean;
  errorMessage?: string;
  placeholder: string;
}>;

export default function AuthPasswordInput({
  id,
  show,
  onToggleShow,
  registration,
  hasError,
  errorMessage,
  placeholder,
}: AuthPasswordInputProps) {
  return (
    <>
      <div className="relative">
        <input
          id={id}
          type={show ? "text" : "password"}
          {...registration}
          placeholder={placeholder}
          className={`w-full bg-[#13151A] border text-white text-sm rounded-xl px-4 py-3.5 pr-12 pl-12 outline-none transition-colors text-right placeholder-gray-600 ${fieldBorderClass(hasError)}`}
        />
        <div className="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 flex items-center justify-center pointer-events-none">
          <i className="ri-lock-line text-gray-500" />
        </div>
        <button
          type="button"
          onClick={onToggleShow}
          className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 flex items-center justify-center cursor-pointer text-gray-500 hover:text-white"
        >
          <i className={show ? "ri-eye-off-line" : "ri-eye-line"} />
        </button>
      </div>
      {errorMessage ? (
        <p className="text-red-400 text-xs mt-1.5 text-right">{errorMessage}</p>
      ) : null}
    </>
  );
}