import {ComponentProps, ReactNode} from 'react'
import {merge} from '@/lib/utils'

export type PageProps = {
  mode?: 'full' | 'blank'
}

export default function Page(props: ComponentProps<'main'> & PageProps) {
  return (
    <main {...props} className={merge(
      `flex-auto flex gap-4`,
      {
        full: `bg-white rounded-tl-xl p-4 flex-col overflow-auto`,
        blank: `items-stretch pb-4 pr-4 overflow-hidden`,
      }[props.mode ?? 'full'],
      props.className,
    )}>
      {props.children}
    </main>
  )
}