'use client'

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

export default function DebtsPage() {
  const { isOpen, close, open } = useSidebar()
  const { unreadCount } = useAlerts()

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

      {/* Main content */}
      <div className="lg:ml-64 min-h-screen flex flex-col">
        {/* Header */}
        <Header onMenuClick={open} title="Deudas" />

        {/* Page content */}
        <main className="flex-1 p-4 md:p-6 lg:p-8 pb-20 lg:pb-8">
          <DebtSection />
        </main>
      </div>

      {/* Mobile Navigation */}
      <MobileNav unreadAlertsCount={unreadCount} />
    </div>
  )
}