// AppBar.jsx
import React from 'react';
import { AppBar, AppBarSection, AppBarSpacer } from '@progress/kendo-react-layout';
import { Button } from '@progress/kendo-react-buttons';
import { Avatar } from '@progress/kendo-react-layout';
import { Link, useNavigate } from 'react-router-dom';
import Logo from '../assets/images/campfire_logs_square_logo_bg_match.png';
import CampfireBreadcrumb from './UI/Breadcrumb';

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

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

    return (
        <div style={{ display: 'flex', alignItems: 'center', height: 'auto', marginTop: '10px' }}>
            <img 
                src={Logo} 
                alt="Campfire Logs Logo" 
                loading="eager"
                fetchPriority="high"
                style={{ 
                    width: "200px",
                    height: "200px",
                    cursor: "pointer",
                    borderRadius: "50%",
                    border: "2px solid #edbd7d",
                    objectFit: "cover",
                    position: "relative",
                    zIndex: 2
                }}
                onClick={() => navigate('/dashboard')}
            />
            <AppBar position="sticky" style={{ backgroundColor: "#242424", display: 'flex', justifyContent: 'space-between', flex: 1, marginLeft: "-100px", minHeight: '60px' }}>
                <AppBarSection>
                    <CampfireBreadcrumb />
                </AppBarSection>
                <AppBarSection>
                    <Link to="/dashboard">
                        <Button look="flat">Dashboard</Button>
                    </Link>
                    
                    <AppBarSpacer style={{ width: 10 }} />
                    
                    <Link to="/editor">
                        <Button look="flat">+ New Post</Button>
                    </Link>
                    
                    <AppBarSpacer style={{ width: 20 }} />
                    
                    {isLoggedIn ? (
                        <>
                            <Button look="flat" onClick={handleLogout}>
                                Logout
                            </Button>
                            <Avatar 
                                rounded="full" 
                                type="image" 
                                style={{ 
                                    marginLeft: "8px",
                                    width: "48px !important",
                                    height: "48px !important",
                                    minWidth: "48px",
                                    maxWidth: "48px",
                                    minHeight: "48px",
                                    maxHeight: "48px"
                                }}
                            >
                                <img 
                                    src="/derek.jpg" 
                                    alt="Derek Seitz" 
                                    style={{ 
                                        width: "100%", 
                                        height: "100%",
                                        border: "2px solid #edbd7d",
                                        borderRadius: "50%"
                                    }}
                                />
                            </Avatar>
                        </>
                    ) : (
                        <Link to="/login">
                            <Button look="flat">Login</Button>
                        </Link>
                    )}
                    
                </AppBarSection>
            </AppBar>
        </div>
    );
};

export default CampfireAppBar;