import React from "react";
import { HydrationBoundary, dehydrate } from "@tanstack/react-query";
import { Invitation } from "@/components/invitation/blocks/invitation";
import { createHelpers } from "@/lib/trpc/server";

type Props = {
    params: Promise<{ id: string; }>;
};

export default async function Page({ params }: Props) {
    const {
        id: invitationId
    } = await params;

    const helpers = await createHelpers();

    await Promise.all([
        helpers.organization.invitation.get.prefetch({
            with: ["organization", "inviter"],
            id: invitationId
        })
    ]);

    return (
        <HydrationBoundary state={dehydrate(helpers.queryClient)}>
            <div className="flex min-h-[80vh] items-center justify-center">
                <div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] dark:bg-black" />

                <Invitation invitationId={invitationId} />
            </div>
        </HydrationBoundary>
    );
}