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 { EmailAccordion } from "~/components/area-riservata/comunicazioni";

const Comunicazioni: 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>

      <div className="mx-auto max-w-7xl grow p-4">
        <div className="p-1">
          <h1 className="text-2xl font-bold text-primary">Comunicazioni</h1>
        </div>

        <EmailAccordion userId={session.user.id} />
      </div>
    </>
  );
};
export default Comunicazioni;

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