import { ReactNode } from 'react';
import { Sidebar } from './Sidebar';
import { TokenTray } from '../znakopis/TokenTray';
import { useSentenceStore } from '../../stores/sentenceStore';

interface LayoutProps {
  children: ReactNode;
}

export function Layout({ children }: LayoutProps) {
  const { currentTokens } = useSentenceStore();

  return (
    <div className="flex h-screen bg-indigo-50">
      <Sidebar />
      <main className="flex-1 overflow-y-auto">
        {/* Global TokenTray - sticky at top when tokens exist */}
        {currentTokens.length > 0 && (
          <div className="sticky top-0 z-50 bg-indigo-50 pt-4 px-6">
            <TokenTray compact={true} />
          </div>
        )}

        <div className="container mx-auto p-6 max-w-7xl">
          {children}
        </div>
      </main>
    </div>
  );
}

