import React, { useState } from "react";
import { useAuth } from "../context/AuthContext";
import Login from "./Login";
import Register from "./Register";
import "./UnauthenticatedApp.scss";

function UnauthenticatedApp() {
	const { login, register } = useAuth();

	const [showRegister, setShowRegister] = useState(false);

	const form = showRegister ? (
		<Register register={register} />
	) : (
		<Login login={login} />
	);
	return (
		<div className="unauthenticated-app">
			<div className="button-wrapper">
				<button
					type="submit"
					onClick={() => setShowRegister(false)}
					className="choose-login"
				>
					Login
				</button>
				<button
					type="submit"
					onClick={() => setShowRegister(true)}
					className="choose-register"
				>
					Register
				</button>
			</div>
			{form}
		</div>
	);
}

export default UnauthenticatedApp;