import React from 'react';
import { AppBar, AppBarSection, AppBarSpacer } from '@progress/kendo-react-layout';
import { Button } from '@progress/kendo-react-buttons';
import { Link, useNavigate } from 'react-router-dom';

const CampfireAppBar = ({ isLoggedIn, onLogin, onDrawerToggle }) => {
    const navigate = useNavigate();

    const handleLogout = () => {
        onLogin(false);
        navigate('/login');
    };

    return (
        <div>
            <h1 style={{ color: "#ff5733", textAlign: "center" }}>Campfire Logs</h1>
            <AppBar position="sticky" style={{ backgroundColor: "#edbd7d"}}>
                <AppBarSection>
                    <Button look="flat" onClick={onDrawerToggle}>
                        <span className="k-icon k-i-menu" />
                    </Button>

                    <AppBarSpacer style={{ width: 800 }} />
                    
                    <Link to="/dashboard">
                        <Button look="flat">Dashboard</Button>
                    </Link>
                    
                    <AppBarSpacer style={{ width: 10 }} />
                    
                    <Link to="/editor">
                        <Button look="flat">+ New Post</Button>
                    </Link>
                </AppBarSection>

                <AppBarSpacer style={{width: 50 }} />

                <AppBarSection>
                    {isLoggedIn ? (
                        <Button look="flat" onClick={handleLogout}>
                            Logout
                        </Button>
                    ) : (
                        <Link to="/login">
                            <Button look="flat">Login</Button>
                        </Link>
                    )}
                </AppBarSection>
            </AppBar>
        </div>
    );
};

export default CampfireAppBar;