import { ReactNode } from 'react';
import { Header } from './Header';
import { Sidebar } from './Sidebar';
import { useUIStore } from '@/stores/ui';
import { cn } from '@/lib/utils';
import { AstralBackground } from '../ui/AstralBackground';

interface LayoutProps {
  children: ReactNode;
}

export function Layout({ children }: LayoutProps) {
  const { sidebarOpen } = useUIStore();

  return (
    <div className="min-h-screen bg-kodo-void text-kodo-text-main relative overflow-x-hidden">
      <AstralBackground />

      <Header />

      <div className="flex relative z-10 transition-all duration-500">
        <Sidebar />

        <main
          className={cn(
            'flex-1 min-h-[calc(100vh-64px)] transition-all duration-300 ease-in-out',
            sidebarOpen ? 'lg:ml-64' : 'ml-0',
          )}
        >
          <div className="max-w-[1600px] mx-auto p-4 sm:p-6 lg:p-8 animate-fadeIn">
            {children}
          </div>
        </main>
      </div>
    </div>
  );
}