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

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

export default function MainLayout() {
  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%', display: 'flex', flexDirection: 'column', boxSizing: 'border-box' }}>
        <Outlet />
      </div>
      <style>{`
        .main-content-area {
          padding: 24px;
        }
        @media (max-width: 768px) {
          .main-content-area {
            padding: 16px;
          }
        }
      `}</style>
    </AppShell>
  );
}