import type { ReactNode } from 'react'
import { ThemeToggle } from '@/components/layout/ThemeToggle'

interface PublicLayoutProps {
  children: ReactNode
}

export function PublicLayout({ children }: PublicLayoutProps) {
  return (
    <div className="relative min-h-svh flex items-center justify-center p-4 overflow-hidden bg-background">
      {/* Grid texture — sutil en light, más presente en dark */}
      <div className="absolute inset-0 grid-bg pointer-events-none" />

      {/* Gradient mesh con radial blobs (brand cyan + violet) */}
      <div className="absolute inset-0 gradient-mesh pointer-events-none" />

      {/* Brand glow accents — más intensos para que la profundidad funcione en light también */}
      <div className="absolute top-[-20%] right-[-10%] w-[600px] h-[600px] rounded-full bg-brand-500/25 dark:bg-brand-500/20 blur-[120px] pointer-events-none" />
      <div className="absolute bottom-[-20%] left-[-10%] w-[600px] h-[600px] rounded-full bg-violet-500/20 dark:bg-violet-500/18 blur-[120px] pointer-events-none" />

      {/* Theme toggle — top-right, glass over gradient */}
      <div className="absolute top-4 right-4 z-20">
        <ThemeToggle />
      </div>

      {/* Content */}
      <div className="relative z-10 w-full flex justify-center">{children}</div>
    </div>
  )
}
