import { redirect, createFileRoute, Outlet } from "@tanstack/react-router";
import Layout from "@/features/core/components/layout";
import { useServerEvents } from "@/hooks/use-server-events";
import { Flex, Loader } from "@mantine/core";

export const Route = createFileRoute("/_authed")({
  beforeLoad: ({ context }) => {
    if (!context.auth?.user) {
      throw redirect({ to: "/login" });
    }

    return {
      auth: {
        ...context.auth,
        user: context.auth.user,
      },
    };
  },
  component: () => {
    useServerEvents();
    return (
      <Layout>
        <Outlet />
      </Layout>
    );
  },
  pendingComponent: () => (
    <Layout>
      <Flex w='100%' h="40dvh" justify="center" align="flex-end">
        <Loader size='xl' />
      </Flex>
    </Layout>
  ),
});