import { useState } from 'react';
import { Outlet, useLocation } from 'react-router-dom';
import { Header } from './Header';
import { Sidebar } from './Sidebar';

export function Layout() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const location = useLocation();

  // Determine title from current route
  const getTitle = () => {
    const path = location.pathname.replace('/', '');
    if (!path || path === 'dashboard') {return 'Dashboard';}
    
    // Handle nested routes
    if (path.includes('/')) {
      const parts = path.split('/');
      // For system routes, show the sub-page name
      if (parts[0] === 'system' && parts[1]) {
        return parts[1].charAt(0).toUpperCase() + parts[1].slice(1);
      }
    }
    
    return path.charAt(0).toUpperCase() + path.slice(1);
  };

  return (
    <div className="h-full">
      <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
      <Header setSidebarOpen={setSidebarOpen} title={getTitle()} />

      <main className="py-8 lg:pl-60 w-full h-full overflow-y-auto">
        <div className="px-8 flex-col h-full">
          <Outlet />
        </div>
      </main>
    </div>
  );
}