import React from 'react';
import { Outlet } from 'react-router-dom';
import Header from './Header';
import Footer from './Footer';

interface LayoutMainProps {
  isAuthenticated?: boolean;
  userInfo?: {
    name: string;
    email: string;
    avatar?: string;
    role: string;
  } | null;
  onLogout?: () => void;
}

const LayoutMain: React.FC<LayoutMainProps> = ({ 
  isAuthenticated = false,
  userInfo = null,
  onLogout
}) => {
  return (
    <div className="flex flex-col min-h-screen">
      {}
      <Header 
        isAuthenticated={isAuthenticated}
        userInfo={userInfo}
        onLogout={onLogout}
      />
      
      {}
      <main className="flex-1 bg-gradient-to-b from-gray-50 to-gray-100/50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
          <Outlet />
        </div>
      </main>
      
      {}
      <Footer />
    </div>
  );
};

export default LayoutMain;
