'use client'

import { Sidebar, Header, MobileNav } from '@/components/layout'
import { BudgetSection } from '@/components/budget'
import { useSidebar } from '@/app/providers'
import { useAlerts } from '@/components/alerts'

export default function BudgetPage() {
  const { isOpen, close, toggle } = useSidebar()
  const { unreadCount } = useAlerts()

  return (
    <div className="flex min-h-screen bg-slate-950">
      <Sidebar isOpen={isOpen} onClose={close} unreadAlertsCount={unreadCount} />

      <div className="flex-1 flex flex-col min-h-screen">
        <Header onMenuClick={toggle} title="Presupuesto" />

        <main className="flex-1 p-4 md:p-6 lg:p-8 pb-20">
          <BudgetSection />
        </main>

        <MobileNav unreadAlertsCount={unreadCount} />
      </div>
    </div>
  )
}