import { Outlet } from "@remix-run/react";
import posthog from "posthog-js";
import { useEffect } from "react";
import { useAppLayoutData } from "~/hooks/useAppLayoutData";

export default function AppLayout() {
  const appLayoutData = useAppLayoutData();

  useEffect(() => {
    if (process.env.NODE_ENV !== "development" && appLayoutData?.user) {
      console.log("Identifying user");
      const name = appLayoutData.user.firstName + " " + appLayoutData.user.lastName;
      const email = appLayoutData.user.emailAddresses[0].emailAddress;
      posthog.identify(appLayoutData.user.id, { email, name });
    }
  }, [appLayoutData?.user]);

  return (
    <div className="h-screen w-screen px-4 pb-1 pt-4">
      <Outlet />
    </div>
  );
}
