'use client'
import posthog from 'posthog-js'
import { PostHogProvider as PHProvider } from 'posthog-js/react'
import { useEffect } from 'react'
import PostHogPageView from './PostHogPageView'

export function PostHogProvider({ children }: { children: React.ReactNode }) {
    useEffect(() => {
        if (typeof window !== 'undefined' && !posthog.__loaded) {
            posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY || 'phc_placeholder_key', {
                api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://us.i.posthog.com',
                capture_pageview: false, // Disable automatic pageview capture, as we handle it manually
                capture_pageleave: true,
                persistence: 'localStorage+cookie',
                opt_out_capturing_by_default: true,
                debug: true,
            })
        }
    }, [])

    return <PHProvider client={posthog}>
        <PostHogPageView />
        {children}
    </PHProvider>
}