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

export default function AppLayout() {
  const location = useLocation();
  
  // Check if we are on the project board page
  const isBoardPage = location.pathname.includes('/board');

  return (
    <div className="flex h-screen w-screen overflow-hidden bg-[var(--color-background)]">
      {/* Sidebar Navigation */}
      <Sidebar />

      {/* Main Content Wrapper */}
      <div className="flex-1 flex flex-col h-full overflow-hidden">
        <Header />
        
        {/* Dynamic Route Container: 
            Board Page gets overflow-hidden for custom drag-drop column scrolling.
            All other pages (Dashboard, Projects, Tasks, Team) get standard overflow-y-auto with full container padding.
        */}
        <main 
          className={`flex-1 ${
            isBoardPage 
              ? 'overflow-hidden flex flex-col relative' 
              : 'overflow-y-auto p-8 w-full'
          }`}
        >
          <Outlet />
        </main>
      </div>
    </div>
  );
}