import React from 'react';
import { useAuth } from '../auth/AuthProvider';

export default function Shell({ children }) {
    const { isSignedIn, user, signOut } = useAuth();

    return (
        <div className="shell">
            <header className="shell-header">
                <div className="shell-logo">
                    <span className="logo-icon">◆</span>
                    <span className="logo-text">AdPlatform</span>
                    <span className="logo-badge">Registration</span>
                </div>

                {isSignedIn && user && (
                    <div className="shell-user">
                        <span className="user-name">{user.displayName || user.email}</span>
                        <button onClick={signOut} className="btn-signout">Sign Out</button>
                    </div>
                )}
            </header>

            <main className="shell-content">{children}</main>

            <footer className="shell-footer">
                <span>AdPlatform Registration Portal v1.0</span>
            </footer>
        </div>
    );
}
