import type { NextPage } from "next";
import Link from "next/link";
import Layout from "../components/Layout";
import { useAuth } from "../context/UserContext";

const Home: NextPage = () => {
  const { user, logout } = useAuth();
  return (
    <Layout>
      <div className="">
        {user ? (
          <>
            <h1>
              Welcome back, <em>{user.name}</em>!
            </h1>
            <p>
              You can change your settings in{" "}
              <Link href="/settings">
                <a>here</a>
              </Link>
            </p>
            <button
              type="button"
              onClick={() => logout()}
              className="form-button"
            >
              Logout
            </button>
          </>
        ) : (
          <>
            <h1>Welcome!</h1>
            <p>Log in to get started</p>
          </>
        )}
      </div>
    </Layout>
  );
};

export default Home;