import { useRoute } from '@react-navigation/native'
import React from 'react'
import { Suspense } from 'react'
import { DefaultLoading } from '../components/page/loading'
import { PageErrorBoundary } from '../components/page/page_error_boundary'
import { ChatAccessGate } from './chat_access_gate'

export function ScreenLayout({ children }: { children: React.ReactElement }) {
  const route = useRoute()

  return (
    <PageErrorBoundary screenName={route.name}>
      <Suspense fallback={<DefaultLoading />}>{children}</Suspense>
    </PageErrorBoundary>
  )
}

export function ScreenLayoutWithChatAccessGate({ children }: { children: React.ReactElement }) {
  return (
    <ScreenLayout>
      <ChatAccessGate>
        <Suspense fallback={<DefaultLoading />}>{children}</Suspense>
      </ChatAccessGate>
    </ScreenLayout>
  )
}