'use client'

import { useState } from 'react'

import Header from '@/components/Header'
import Sidebar from '@/components/Sidebar'
import BackToTop from '@/components/BackToTop'
import type { UserInfo } from '@/app/_helpers/types'

interface UserShellProps {
    children: React.ReactNode
    initialUserInfo: UserInfo | null
}

export default function UserShell({ children }: UserShellProps) {
    const [sidebarOpen, setSidebarOpen] = useState(false)

    return (
        <div className="min-h-screen bg-white dark:bg-[#0c0d0e] text-black dark:text-white">
            <Header onMenuClick={() => setSidebarOpen(true)} />

            <div className="flex-1 min-h-screen w-full max-w-full overflow-x-hidden transition-all pt-[60px]">
                <div className="flex">
                    <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} mode="drawer" />
                    {children}
                </div>
            </div>

            <BackToTop />
        </div>
    )
}