'use client';

import React from 'react';
import { useAuth } from '@/lib/auth';
import LoginPage from '@/app/auth/login/page';
import { Button } from '@/components/ui/button';

const MainLayout = ({ children }: { children: React.ReactNode }) => {
    const auth = useAuth();

    if (!auth.isAuthenticated) {
        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="/main/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>
    );
};

export default MainLayout;