import type { NextPageWithLayout } from "~/pages/_app";
import { useTranslation } from "~/providers/I18nProvider";
import { AreaRiservataLayout } from "~/components/Layout";
import { LoadingPage } from "~/components/loading";
import Head from "next/head";
import { api } from "~/utils/api";
import { Status500 } from "~/components/status-page";
import { OrdiniTable } from "~/components/tables/orders-table";

const Ordini: NextPageWithLayout = () => {
  const { t } = useTranslation();
  const { data, isLoading } = api.servizio.getOrdini.useQuery({});

  if (isLoading) return <LoadingPage />;
  if (!data) return <Status500 />;

  return (
    <>
      <Head>
        <title>{t.heads.area_riservata_titolo}</title>
        <meta name="description" content={t.heads.area_riservata_description} />
      </Head>
      <div className="mx-1 flex-1 overflow-auto">
        <div className="mx-auto pt-4">
          <div className="mx-3 items-start justify-between md:flex">
            <div className="flex max-w-lg items-center gap-3">
              <h3 className="text-2xl font-bold">Ordini</h3>
            </div>
          </div>

          <OrdiniTable data={data} isAdmin />
        </div>
      </div>
    </>
  );
};
export default Ordini;

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