import type { ComponentProps } from "react"
import { cn } from "@/lib/utils"

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

export default function Page(props: ComponentProps<"main"> & PageProps) {
  return (
    <main {...props} className={cn(`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-500 h-500 -left-250 -top-250 bg-radial from-blue-50/50 from-10% to-transparent to-50%"></div>
        <div className="absolute w-500 h-500 -right-250 -top-250 bg-radial from-blue-50/50 from-10% to-transparent to-50%"></div>
        <div className="absolute w-500 h-500 left-[calc(50%-1000px)] -bottom-250 bg-radial from-blue-50/50 from-10% to-transparent to-50%"></div>
      </div>

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