import React, { useState, Suspense } from 'react';
import { Layout, Spin } from 'antd';
import { Outlet } from 'react-router-dom';
import Header from './Header';
import Sidebar from './Sidebar';
import { useTheme } from '@/contexts/ThemeContext';

const { Content } = Layout;

const MainLayout = () => {
  const [collapsed, setCollapsed] = useState(false);
  const { isDarkMode } = useTheme();

  return (
    <Layout className="min-h-screen">
      <Sidebar collapsed={collapsed} />
      <Layout className="flex flex-col h-screen">
        <Header collapsed={collapsed} setCollapsed={setCollapsed} />
        <Content
          className={`
            m-2 p-4 rounded-lg overflow-auto
            ${isDarkMode ? 'bg-[#141414]' : 'bg-white'}
            flex-1
          `}
        >
          <Suspense fallback={
            <div className="flex items-center justify-center h-full">
              <Spin size="large" />
            </div>
          }>
            <Outlet />
          </Suspense>
        </Content>
      </Layout>
    </Layout>
  );
};

export default MainLayout;