import Layout from "../components/layout";
import WantToButton from "../components/wanttobutton";
import Link from "next/link";
import { useFetchUser } from "../lib/user";

function Home() {
  const { user, loading } = useFetchUser();

  return (
    <Layout user={user} loading={loading}>
      {loading && <p>Loading login info...</p>}

      {!loading && !user && (
        <>
          <div className="flex flex-col justify-center">
            <p className="text-lg">I want to...</p>
            <div className="flex flex-row mt-2">
              <WantToButton href="/api/v1/login" text="login" />
              <WantToButton
                href="/api/v1/login"
                text="stay anonymous"
              />
            </div>
          </div>
        </>
      )}

      {user && (
        <>
          <h4>Rendered user info on the client</h4>
          <img src={user.picture} alt="user picture" />
          <p>nickname: {user.nickname}</p>
          <p>name: {user.name}</p>
          <p>
            <form method="POST" action="/api/v1/bookmarks">
              <label for="title">title: </label>
              <input type="text" name="title" />
              <br />
              <label for="url">url:</label>
              <input type="text" name="url" />
              <button type="submit">Add bookmark</button>
            </form>
          </p>
        </>
      )}
    </Layout>
  );
}

export default Home;