import React from 'react';
import { ChevronRight } from 'lucide-react';
import { Sidebar } from './Sidebar';
import { Header } from './Header';

interface LayoutProps {
  children: React.ReactNode;
  currentView: string;
  setCurrentView: (view: string) => void;
}

export function Layout({ children, currentView, setCurrentView }: LayoutProps) {
  return (
    <div className="flex h-screen bg-gray-50 overflow-hidden font-sans">
      <Sidebar currentView={currentView} setCurrentView={setCurrentView} />
      <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
        <Header title={currentView} />
        <div className="px-8 mt-8 shrink-0">
          <nav className="flex items-center gap-2 text-sm font-normal" aria-label="Breadcrumb">
            <button
              type="button"
              onClick={() => setCurrentView('Dashboard')}
              className="text-gray-500 hover:text-gray-700 transition-colors"
            >
              Home
            </button>
            <ChevronRight className="w-4 h-4 text-gray-500 shrink-0" />
            <span style={{ color: 'rgb(43, 50, 143)' }}>{currentView}</span>
          </nav>
        </div>
        <main className="flex-1 overflow-y-auto p-8">
          <div className="w-full h-full">
            {children}
          </div>
        </main>
      </div>
    </div>
  );
}