import { useState } from 'react'
import { Outlet } from 'react-router-dom'
import '../../styles/mobile.css'
import { TopBar } from '../../components/mobile/TopBar'
import { BottomNav } from '../../components/mobile/BottomNav'
import { SlideOutNav } from '../../components/mobile/SlideOutNav'

export function MobileShell() {
  const [menuOpen, setMenuOpen] = useState(false)

  return (
    <div className="mob-app">
      <TopBar onMenuClick={() => setMenuOpen(true)} />
      <SlideOutNav open={menuOpen} onClose={() => setMenuOpen(false)} />
      <main className="mob-content">
        <Outlet />
      </main>
      <BottomNav />
    </div>
  )
}