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';}
    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-4 lg:pl-60 w-full h-full overflow-y-auto">
        <div className="px-4 flex-col h-full">
          <Outlet />
        </div>
      </main>
    </div>
  );
}