input.tsx

import { tv } from "tailwind-variants";
import { RenderFieldProps } from "../Input.types";
import { usePasswordToggle } from "@/hooks/usePasswordToggle";

const inputClass = tv({
  base: "body-3 w-full rounded-xl p-4 bg-white bg-opacity-10 ring-0 outline-0 focus:ring-1 active:ring-1 focus:ring-white active:ring-white transition-all ease-in-out duration-300 text-white",
  variants: {
    error: {
      true: "border border-error-600",
      false: "",
    },
    withIcon: {
      true: "pr-12", // Add padding to the right to accommodate the icon
    },
  },
});

const Input = ({
  type,
  disabled,
  className,
  errors,
  inputProps,
  inputRef,
  handleChange,
  defaultValue,
  name,
  ref,
  props,
}: RenderFieldProps) => {
  const { showPassword, PasswordToggleIcon } = usePasswordToggle();
  console.log("type", type);
  return (
    <div className="relative w-full">
      <input
        defaultValue={defaultValue}
        className={inputClass({
          error: !disabled && errors[name] !== undefined,
          withIcon: type === "password",
          className,
        })}
        disabled={disabled}
        id={name}
        type={type === "password" && showPassword ? "text" : type}
        {...inputProps}
        onChange={handleChange}
        {...props}
        ref={(e) => {
          if (typeof inputRef === "function") inputRef(e);
          if (typeof ref === "function") ref(e);
        }}
      />
      {type === "password" && PasswordToggleIcon}
    </div>
  );
};

export default Input;