'use client';

import { Sidebar, Header, MobileNav } from '@/components/layout';
import { CardSection } from '@/components/cards';
import { useSidebar } from '@/app/providers';
import { useAlerts } from '@/components/alerts';

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

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

      <div className="lg:ml-64 min-h-screen flex flex-col">
        <Header onMenuClick={toggle} title="Tarjetas de Crédito" />

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

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