'use client';

import { useState, useCallback } from 'react';
import { Sidebar } from './sidebar';
import { MobileHeader } from './mobile-header';

export function DashboardShell({ children }: { children: React.ReactNode }): React.JSX.Element {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const closeSidebar = useCallback(() => setSidebarOpen(false), []);

  return (
    <>
      <Sidebar open={sidebarOpen} onClose={closeSidebar} />
      <MobileHeader onMenuClick={() => setSidebarOpen(true)} />
      <main className="min-h-screen px-4 pb-6 pt-20 md:ml-64 md:p-8">
        {children}
      </main>
    </>
  );
}
