PasswordInputToggle

export const PasswordInputToggle = forwardRef((props, passwordRef) => {
  const { inputValue, inputLabel, inputName, onChange, tooltip } = props;
  const passwordToggle = (e) => {
    const password = e.current;

    if (password.type === "password") {
      password.type = "text";
    } else {
      password.type = "password";
    }
    password.focus();
  };

  return (
    <div className="relative">
      {tooltip?.enabled && <ToolTip>{tooltip?.message}</ToolTip>}
      <div className="absolute inset-y-0 right-0 flex items-center px-2">
        <input className="hidden js-password-toggle" id="toggle" type="checkbox" />
        <div
          className="group bg-none cursor-pointer js-password-label"
          htmlFor="toggle"
          onClick={(e) => passwordToggle(passwordRef)}
        >
          <EyeIcon width={20} height={20} className="text-gray-200 group-hover:text-gray-500" />
        </div>
      </div>
      <div
        htmlFor={inputName}
        className="absolute left-4 px-2 bg-[#ffffff] text-[#919EAB] text-xs"
        style={{ transform: "translateY(-45%)" }}
      >
        <label dangerouslySetInnerHTML={{ __html: inputLabel }} />
      </div>
      <input
        type="password"
        id={inputName}
        name={inputName}
        className="w-full pl-10 pr-4 py-3 border rounded-md focus:outline-none resize-none "
        placeholder=""
        ref={passwordRef}
        defaultValue={inputValue}
        onChange={(e) => onChange(e)}
      />
    </div>
  );
});