import { useAdminAuth } from '@_context/AdminAuthContext';
import React from 'react';
import { Link, useNavigate } from 'react-router-dom';
import '@_css/navbar.css';

const AdminNavbar: React.FC = () => {
    const { isAdmin, name, type, logout } = useAdminAuth();
    const navigate = useNavigate();

    const handleLogout = async (e: React.MouseEvent) => {
        e.preventDefault();
        try {
            await logout();
            navigate('/');
        } catch (error) {
            console.error("Logout failed", error);
        }
    };

    return (
        <nav className="navbar-container">
            <div className="nav-links">
                <Link className="nav-link" to="/admin">홈</Link>
                {type === 'HQ' && <Link className="nav-link" to="/admin/theme">테마</Link>}
                {type === 'HQ' && <Link className="nav-link" to="/admin/store">매장</Link>}
                <Link className="nav-link" to="/admin/schedule">일정</Link>
            </div>
            <div className="nav-actions">
                {!isAdmin ? (
                    <button className="btn btn-primary" onClick={() => navigate('/admin/login')}>Login</button>
                ) : (
                    <div className="profile-info">
                        <img className="profile-image" src="/image/default-profile.png" alt="Profile" />
                        <span>{name || 'Profile'}</span>
                        <div className="dropdown-menu">
                            <a className="dropdown-item" href="#" onClick={handleLogout}>Logout</a>
                        </div>
                    </div>
                )}
            </div>
        </nav>
    );
};

export default AdminNavbar;