import { Suspense } from 'react'
import ComponentClient from './component.client'

type Props = {
  file: string
  params: Promise<Record<string, string | string[]>>
}

async function ComponentServer(props: Props) {
  const params = await props.params
  return (
    <code
      data-server-file={props.file}
      data-server-params={JSON.stringify(params)}
    >
      {JSON.stringify(params)}
    </code>
  )
}

export default function Component(props: Props) {
  return (
    <div data-file={props.file}>
      <div>File: {props.file}</div>

      <Suspense fallback={<div data-loading>Loading Server...</div>}>
        <ComponentServer {...props} />
      </Suspense>
      <Suspense fallback={<div data-loading>Loading Client...</div>}>
        <ComponentClient file={props.file} />
      </Suspense>
    </div>
  )
}