import Navigation from '@/components/Navigation';
import { ReactNode } from 'react';
import { Link } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { ArrowLeft } from 'lucide-react';

interface LayoutProps {
  children: ReactNode;
  showBackToGames?: boolean;
}

const Layout = ({ children, showBackToGames = false }: LayoutProps) => {
  return (
    <div className="min-h-screen bg-background flex flex-col">
      <Navigation />
      
      {showBackToGames && (
        <div className="border-b border-outline bg-surface/50">
          <div className="max-w-6xl mx-auto px-4 py-3">
            <Button asChild variant="ghost" size="sm" className="gap-2">
              <Link to="/themes/games">
                <ArrowLeft className="w-4 h-4" />
                Back to Games
              </Link>
            </Button>
          </div>
        </div>
      )}
      
      <main className="flex-1">
        {children}
      </main>
      
      <footer className="bg-surface border-t border-outline py-8 px-4 mt-auto">
        <div className="max-w-6xl mx-auto text-center">
          <p className="text-muted-foreground">
            © 2025 Interactives. Interactives for enhanced learning experiences and pure joy.
          </p>
          <div className="mt-4 flex justify-center gap-6 text-sm text-muted-foreground">
            <span>Made with ❤️ and help from friends and LLMs. More detailed acks coming soon!</span>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default Layout;