"use client";
import FormInput, { FormInputProps } from "@/shared/form-controls/FormInput";
import { useState } from "react";
import { UnlockIcon } from "../Icons";
import { LiaUnlockAltSolid } from "react-icons/lia";

interface PasswordControllerProps extends FormInputProps {}

const PasswordController: React.FC<PasswordControllerProps> = ({
  ...props
}) => {
  const [showPassword, setShowPassword] = useState(false);

  return (
    <FormInput
      disabled={props?.disabled}
      rightIcon={
        <button
          type="button"
          className="!pe-5"
          onClick={() => setShowPassword((state) => !state)}
        >
          {showPassword ? <LiaUnlockAltSolid /> : <UnlockIcon />}
        </button>
      }
      type={showPassword ? "text" : "password"}
      {...props}
    />
  );
};

export default PasswordController;