import {ComponentProps} 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(`relative size-full`)}>

      {/* background */}
      <div className="absolute inset-0 overflow-hidden">
        <div className="absolute w-screen h-screen bg-gray-50"></div>
        <div className="absolute w-[2000px] h-[2000px] -left-[1000px] -top-[1000px] bg-radial from-blue-50/50 from-10% to-transparent to-50%"></div>
        <div className="absolute w-[2000px] h-[2000px] -right-[1000px] -top-[1000px] bg-radial from-blue-50/50 from-10% to-transparent to-50%"></div>
        <div className="absolute w-[2000px] h-[2000px] left-[calc(50%-1000px)] -bottom-[1000px] bg-radial from-blue-50/50 from-10% to-transparent to-50%"></div>
      </div>

      {/* content */}
      <div className={merge(
        `relative w-full h-full`,
        `flex flex-col gap-4 p-4 overflow-auto`,
        props.className,
      )}>
        {props.children}
      </div>
    </main>
  )
}
