
import React, { useState } from 'react';
import Sidebar from './Sidebar';
import styles from './MainLayout.module.css';

import ThemeToggle from '../Common/ThemeToggle';

import Breadcrumbs from './Breadcrumbs';

const MainLayout = ({ children, currentView, onNavigate, currentUser, currentTheme, onToggleTheme }) => {
  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);

  return (
    <div className={styles.container}>
      <Sidebar
        isCollapsed={isSidebarCollapsed}
        toggleCollapse={() => setIsSidebarCollapsed(!isSidebarCollapsed)}
        currentView={currentView}
        onNavigate={onNavigate}
        currentUser={currentUser}
      />
      <main className={`${styles.main} ${isSidebarCollapsed ? styles.collapsed : ''}`}>
        <header className={styles.header}>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            <h1 style={{ fontSize: '1.2rem', marginBottom: '0.2rem' }}>MRO SYSTEM</h1>
            <Breadcrumbs currentView={currentView} onNavigate={onNavigate} />
          </div>
          <div style={{ marginLeft: 'auto' }}>
            <ThemeToggle theme={currentTheme} onToggle={onToggleTheme} />
          </div>
        </header>
        <div className={styles.content}>
          {children}
        </div>
      </main>
    </div>
  );
};

export default MainLayout;
