import React, { useState } from 'react';
import { Header } from './Header';
import { Footer } from './Footer';
import { LegalModal } from './LegalModal';
import { useAuth } from '../AuthContext';
import { ApiKeyModal } from './ApiKeyModal';

interface LayoutProps {
    children: React.ReactNode;
    projectTitle?: string;
}

export const Layout: React.FC<LayoutProps> = ({ children, projectTitle }) => {
    const { user, logout } = useAuth();
    const [legalModalOpen, setLegalModalOpen] = useState(false);
    const [legalContent, setLegalContent] = useState({ title: '', text: '' });
    const [isApiKeyModalOpen, setIsApiKeyModalOpen] = useState(false);

    const openLegalModal = (title: string, text: string) => {
        setLegalContent({ title, text });
        setLegalModalOpen(true);
    };

    if (!user) return <>{children}</>;

    return (
        <div className="min-h-screen flex flex-col bg-stone-50">
            <Header
                user={user}
                logout={logout}
                openApiKeyModal={() => setIsApiKeyModalOpen(true)}
                projectTitle={projectTitle}
            />

            <main className="flex-grow">
                {children}
            </main>

            <Footer openModal={openLegalModal} />

            <LegalModal
                isOpen={legalModalOpen}
                onClose={() => setLegalModalOpen(false)}
                title={legalContent.title}
                content={legalContent.text}
            />

            <ApiKeyModal
                isOpen={isApiKeyModalOpen}
                onClose={() => setIsApiKeyModalOpen(false)}
            />
        </div>
    );
};

export default Layout;