import HomePage from "~/components/home";
import { UserDropdown } from "~/components/user-dropdown";
import { MainLayout } from "~/layout";
import { useUser } from "~/lib/api";
import { forceReload } from "~/lib/utils";

export default function Home() {
  const { user, isLoading, error } = useUser();
  if (error) {
    console.error(error);
    // TODO: handle error (redirect to login or show error message)
  }
  return (
    <MainLayout page={<HomePage />}>
      <h1 className="text-2xl font-bold" onClick={forceReload}>
        Khollis&eacute; - {user.className} ⚔️
      </h1>
      {/* TODO: isLoading to display skeleton */}
      <UserDropdown user={user} />
    </MainLayout>
  );
}