"use client"
import React, { ReactNode } from "react"
import { useIsHydrated } from "../../hooks"

type HydrationGuardProps = {
  fallback?: ReactNode
  children: ReactNode
}

export const HydrationGuard = ({ fallback, children }: HydrationGuardProps) => {
  const isHydrated = useIsHydrated()

  if (!isHydrated) {
    return <>{fallback || null}</>
  }

  return <>{children}</>
}