const MainLayout = ({ children }) => {
    const auth = useAuth();

    if (!auth.isAuthenticated) {
        // This would be a redirect in a real Next.js app
        return <LoginPage />;
    }

    return (
        <div className="min-h-screen bg-gray-50">
            <header className="bg-white shadow-sm">
                <nav className="container mx-auto px-4 py-4 flex justify-between items-center">
                    <h1 className="text-xl font-bold">Video Voter</h1>
                    <div>
                        {auth.user?.role === 'admin' && (
                            <a href="#admin" className="text-gray-600 hover:text-gray-900 mr-4">Admin</a>
                        )}
                        <Button onClick={auth.logout}>Logout</Button>
                    </div>
                </nav>
            </header>
            <main className="container mx-auto p-4">
                {children}
            </main>
        </div>
    );
};