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

const AuthenticatedView: FC<
  Pick<UserContextAuthenticatedInterface, "user" | "logout">
> = ({ user, logout }) => (
  <div>
    <h1 className="text-2xl font-bold mb-4 text-center">Welcome back!</h1>
    <div className="rounded w-full mx-auto border p-4 flex flex-col gap-4 xs:max-w-md xs:gap-6 xs:py-6">
      <header className="flex flex-col items-center text-center gap-2 xs:flex-row xs:gap-4 xs:text-left">
        <div className="h-12 w-12 bg-gray-300 rounded-full flex justify-center items-center">
          <img
            src="/favicon.svg"
            width={25}
            height={30}
            alt="profile picture"
          />
        </div>
        <div>
          <h2 className="font-bold">{user.name}</h2>
          <p className="text-sm">{user.email}</p>
          <p>
            <span className="bg-green-200 font-semibold font-mono rounded text-xs inline-block px-1 leading-5">
              {user.team}
            </span>
          </p>
        </div>
      </header>
      <div className="flex flex-col gap-2 xs:flex-row">
        <Link href="/settings">
          <a className="default-button">Edit profile</a>
        </Link>
        <button
          type="button"
          onClick={() => logout()}
          className="outline-button"
        >
          Logout
        </button>
      </div>
    </div>
  </div>
);

const Home: NextPage = () => {
  const { user, logout } = useAuth();
  return (
    <Layout>
      <div className="">
        {user ? (
          <AuthenticatedView user={user} logout={logout} />
        ) : (
          <div>
            <h1 className="text-2xl font-bold mb-4 text-center">Welcome!</h1>
            <p className="text-center">Please, sign up or log in to continue</p>
          </div>
        )}
      </div>
    </Layout>
  );
};

export default Home;