import { ReactNode, useEffect, useState } from "react"

export default function ClientOnly({
  fallback,
  children,
}: {
  fallback: ReactNode
  children(): ReactNode
}) {
  const isClient = typeof window !== "undefined"

  const [rendered, setRendered] = useState(false)

  useEffect(() => {
    setRendered(true)
  }, [])

  return isClient && rendered ? children() : fallback
}