import { useState } from 'react';
import { Outlet } from 'react-router-dom';
import { AppShell } from '@astryxdesign/core/AppShell';

import Header from './Header';
import Sidebar from './Sidebar';

// ==============================|| DOORMILE - APP SHELL ||============================== //
// Astryx AppShell owns the responsive chrome: sticky top nav, collapsible side nav,
// and the auto-generated mobile drawer. Pages keep their own internal padding.

export default function MainLayout() {
  // Lifted here (rather than left as SideNav's own uncontrolled state) so the
  // navbar's logo can track the sidebar's collapse state — one logo, not two.
  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(true);

  return (
    <AppShell
      variant="section"
      height="fill"
      contentPadding={0}
      topNav={<Header isSidebarCollapsed={isSidebarCollapsed} />}
      sideNav={<Sidebar isCollapsed={isSidebarCollapsed} onCollapsedChange={setIsSidebarCollapsed} />}
      mobileNav={{ breakpoint: 'lg' }}
    >
      <div className="main-content-area" style={{ minHeight: '100%', boxSizing: 'border-box' }}>
        <Outlet />
      </div>
      <style>{`
        .main-content-area {
          padding: 24px;
        }
        @media (max-width: 480px) {
          .main-content-area {
            padding: 16px;
          }
        }
      `}</style>
    </AppShell>
  );
}
