import React from 'react';
import TopBar from '@/components/layout/TopBar.tsx';
import Footer from '@/components/layout/Footer.tsx';

interface MainLayoutProps {
  children?: React.ReactNode;
  onNavigate: (page: 'about' | 'contact' | 'privacy') => void;
  className?: string;
}

export const MainLayout = ({ children, onNavigate, className = '' }: MainLayoutProps) => (
  <div className="flex flex-col min-h-screen" style={{ position: 'relative' }}>
    <TopBar />
    <main className={`flex-1 ${className}`} style={{ position: 'relative' }}>
      {children}
    </main>
    <Footer onNavigate={onNavigate} />
  </div>
);