import { notFound } from 'next/navigation'
import { getInstanceBySlug, getConfiguration } from '@/lib/api/client'
import { resolveColors } from '@/lib/theme'
import SplashScreen from '@/components/SplashScreen'

export default async function ConfigLayout({
  children,
  params,
}: {
  children: React.ReactNode
  params: Promise<{ slug: string; configId: string }>
}) {
  const { slug, configId } = await params

  let instance, config
  try {
    instance = await getInstanceBySlug(slug)
    config = await getConfiguration(configId, instance.publicApiKey!)
  } catch {
    notFound()
  }

  const theme = resolveColors(instance, config)
  const loaderImageUrl = config.loaderImageUrl ?? instance.loaderImageUrl

  return (
    <div style={theme as React.CSSProperties}>
      {loaderImageUrl && <SplashScreen imageUrl={loaderImageUrl} configId={configId} />}
      {children}
    </div>
  )
}