"use client";

import { Suspense } from "react";
import { useTranslation } from "../../../contexts/MessagesContext";
import { ExpiredInviteScreen } from "../_components/ExpiredInviteScreen";

function ExpiredInviteFallback() {
  const t = useTranslation("pages.invite");
  return (
    <div className="flex min-h-[100dvh] items-center justify-center bg-[var(--color-surface-invert-brand-primary)]">
      <p className="text-[14px] text-[var(--color-content-default-primary)]">
        {t("loadingFallback")}
      </p>
    </div>
  );
}

export default function ExpiredInvitePage() {
  return (
    <Suspense fallback={<ExpiredInviteFallback />}>
      <ExpiredInviteScreen />
    </Suspense>
  );
}