import Head from "next/head";
import { useTranslation } from "~/providers/I18nProvider";
import { useSession } from "~/providers/SessionProvider";
import { AreaRiservataLayout } from "~/components/Layout";
import type { NextPageWithLayout } from "~/pages/_app";
import { Status500 } from "~/components/status-page";
import { LoadingPage } from "~/components/loading";
import {
  AdminDashboard,
  UserDashboard,
} from "~/components/area-riservata/dashboard";

const Dashboard: NextPageWithLayout = () => {
  const { t } = useTranslation();
  const session = useSession();

  if (session.status === "pending") return <LoadingPage />;
  if (!session || !session.user) return <Status500 />;

  return (
    <>
      <Head>
        <title>{t.heads.area_riservata_titolo}</title>
        <meta name="description" content={t.heads.area_riservata_description} />
      </Head>

      {session.user.isAdmin ? (
        <AdminDashboard />
      ) : (
        <UserDashboard userId={session.user.id} />
      )}
    </>
  );
};

export default Dashboard;

Dashboard.getLayout = function getLayout(page) {
  return <AreaRiservataLayout>{page}</AreaRiservataLayout>;
};
