import { Navigate } from "react-router";
import Error from "~/components/error";
import SettingsPage from "~/components/settings";
import Loader from "~/components/loader";
import { MainLayout } from "~/layout";
import { AUTH_ERROR, useUser } from "~/lib/api";
import { forceReload } from "~/lib/utils";

export default function Settings() {
  const { user, isLoading, error } = useUser();

  if (isLoading) {
    return <Loader />;
  }
  if (error?.message === AUTH_ERROR) {
    return <Navigate to="/login" replace />;
  }
  if (error) {
    return <Error message={error.message} />;
  }

  return (
    <MainLayout
      header={
        <h1 className="text-2xl font-bold" onClick={forceReload}>
          Khollis&eacute; - {user.className} ⚔️
        </h1>
      }
    >
      <SettingsPage user={user} />
    </MainLayout>
  );
}