kgroad-frontend2/src/widgets/ProfileForm/ChangePassword/ChangePasswordInput/ChangePasswordInput.tsx

"use client";

import "./ChangePasswordInput.scss";
import Image from "next/image";
import { useState } from "react";
import eye_off from "./icons/eye-off.svg";
import eye_on from "./icons/eye-on.svg";

interface IChangePasswordInputProps
  extends React.InputHTMLAttributes<HTMLInputElement> {
  label: string;
  error: string;
}

const ChangePasswordInput: React.FC<IChangePasswordInputProps> = ({
  label,
  error,
  placeholder,
  name,
  onChange,
  value,
}: IChangePasswordInputProps) => {
  const [isOpen, setIsOpen] = useState<boolean>(false);
  return (
    <div className="change-password-input">
      <label>{label}</label>
      <div
        className={`change-password-input__field${
          error ? "-with-error" : ""
        }`}
      >
        <input
          onChange={onChange}
          value={value}
          name={name}
          placeholder={placeholder}
          type={isOpen ? "text" : "password"}
        />
        <button
          onClick={() => setIsOpen((prev) => !prev)}
          type="button"
        >
          <Image src={isOpen ? eye_on : eye_off} alt="Eye Icon" />
        </button>
      </div>
      {error ? <p>{error}</p> : null}
    </div>
  );
};

export default ChangePasswordInput;