import { NextPage } from "next";
import FormResponse from "../components/FormResponse";
import Layout from "../components/Layout";
import Spinner from "../components/Spinner";
import useForm from "../hooks/useForm";
import api from "../utils/api";

const SignUp: NextPage = () => {
  const { submitHandler, error, success, loading } = useForm(api.register);

  return (
    <Layout>
      <form className="form" onSubmit={submitHandler}>
        <div className="form-group">
          <label htmlFor="email" className="form-label">
            Email
          </label>
          <input
            type="email"
            name="email"
            id="email"
            className="form-input"
            placeholder="monkey@gmail.com"
            required
          />
        </div>
        <div className="form-group">
          <label htmlFor="password" className="form-label">
            Password
          </label>
          <input
            type="password"
            name="password"
            id="password"
            className="form-input"
            minLength={6}
            placeholder="••••••"
            required
          />
        </div>
        <button type="submit" className="form-button" disabled={loading}>
          {loading ? <Spinner /> : "Sign up"}
        </button>
        <FormResponse
          error={error}
          success={success}
          loading={loading}
          fallbackSuccessMessage="User created correctly! Please, log in to continue"
        />
      </form>
    </Layout>
  );
};

export default SignUp;