'use client'

import { useState } from 'react'

import Header from '@/components/Header'
import Sidebar from '@/components/Sidebar'
import Footer from '@/components/Footer'

export default function AuthPageShell({ children }: { children: React.ReactNode }) {
    const [sidebarOpen, setSidebarOpen] = useState(false)

    return (
        <div className="min-h-screen supports-[height:100svh]:min-h-[100svh] bg-white dark:bg-[#0c0d0e] text-gray-900 dark:text-white flex flex-col">
            <Header onMenuClick={() => setSidebarOpen(true)} />
            <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} mode="drawer" />
            <main className="flex-1 w-full px-4 pt-[150px] pb-10 flex items-center justify-center">
                <div className="mx-auto w-full max-w-[560px]">{children}</div>
            </main>
            <Footer className="mt-0" />
        </div>
    )
}