"use client";

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

interface IAuthInputProps
  extends React.InputHTMLAttributes<HTMLInputElement> {
  isPassword?: boolean;
  label: string;
  error: string;
}

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

export default AuthInput;