import React, { useState } from "react";
import "./form-input.style.scss";

const FormInput = ({ handleChange, label, onChange, ...otherProps }) => {
  const [input, setInput] = useState("");
  const [toggleLabel, changeToggleLabel] = useState(false);

  return (
    <div className="group">
      <label
        className={`${toggleLabel ? "shrink" : ""} ${
          input ? "shrink" : ""
        } form-input-label`}
      >
        {label}
      </label>
      <input
        value={input}
        onChange={(e) => {
          setInput(e.target.value);
          onChange(e.target.value);
        }}
        onFocus={() => changeToggleLabel(true)}
        onBlur={() =>
          input ? changeToggleLabel(true) : changeToggleLabel(false)
        }
        {...otherProps}
      />
    </div>
  );
};

export default FormInput;
