import { Suspense } from "react"
import { auth0 } from "@/lib/auth0"
import PostHogClient from "@/lib/posthog"
import GettingStartedClient from "./getting-started-client"

async function GettingStartedContent() {
  const session = await auth0.getSession()
  if (!session) return null

  const userId = session.user.sub
  const posthog = PostHogClient()
  posthog?.capture({
    distinctId: userId,
    properties: { username: session.nickname },
    event: "webapp-loaded-getting-started",
  })

  return <GettingStartedClient />
}

export default function GettingStarted() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <GettingStartedContent />
    </Suspense>
  )
}
