import Image from "next/image";
import "./InputWithLabel.scss";
import eye_icon from "./icons/eye-icon.svg";
import eye_off_icon from "./icons/eye-off-icon.svg";
import { useState } from "react";

interface IInputWithLabel {
  value?: string;
  label?: string;
  placeholder?: string;
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
  name?: string;
  secret?: boolean;
  error: string;
}

const InputWithLabel: React.FC<IInputWithLabel> = ({
  placeholder,
  label,
  value,
  onChange,
  name,
  secret,
  error,
}: IInputWithLabel) => {
  const [show, setShow] = useState<boolean>(false);
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (onChange) {
      onChange(e);
    }
  };

  return (
    <div className="input-with-label">
      <label>{label}</label>

      <div className="input-with-label__wrapper">
        <input
          onChange={handleChange}
          type={!secret ? "text" : show ? "text" : "password"}
          value={value}
          placeholder={placeholder}
          name={name}
        />
        {secret && (
          <button
            type="button"
            onClick={() => setShow((prev) => !prev)}
          >
            {show ? (
              <Image src={eye_icon} alt="Eye Opened Icon" />
            ) : (
              <Image src={eye_off_icon} alt="Eye Closed Icon" />
            )}
          </button>
        )}
      </div>
      {error ? <p>{error}</p> : null}
    </div>
  );
};

export default InputWithLabel;