import { useState } from 'react';
import { Navbar } from '../components/layout/Navbar';
import type { TabId } from '../components/layout/Navbar';

interface MainLayoutProps {
  children: (activeTab: TabId) => React.ReactNode;
}

export function MainLayout({ children }: MainLayoutProps) {
  const [activeTab, setActiveTab] = useState<TabId>('dashboard');

  return (
    <div className="min-h-screen bg-slate-50 flex flex-col">
      <Navbar activeTab={activeTab} onTabChange={setActiveTab} />
      <main className="flex-1 w-full max-w-[1600px] mx-auto p-6">
        {children(activeTab)}
      </main>
    </div>
  );
}
