import { useAuth } from '@/context/AuthContext';
import React from 'react';
import { NavLink, useNavigate } from 'react-router-dom';
import './Navbar.scss';

const Navbar: React.FC = () => {
    const { isAuthenticated, logout } = useAuth();
    const navigate = useNavigate();

    const handleLogout = () => {
        logout();
        navigate('/login');
    };
    
    return (
        <nav className="navbar">
            <ul>
                {isAuthenticated ? (
                    <>
                        <li>
                            <NavLink
                                to="/logs"
                                className={({ isActive }) => (isActive ? 'active' : '')}
                            >
                                Логи
                            </NavLink>
                        </li>
                        <li>
                            <NavLink
                                to="/docs"
                                className={({ isActive }) => (isActive ? 'active' : '')}
                            >
                                Датасеты
                            </NavLink>
                        </li>
                        <li>
                            <NavLink
                                to="/llmconfig"
                                className={({ isActive }) => (isActive ? 'active' : '')}
                            >
                                Настройки LLM
                            </NavLink>
                        </li>
                        <li>
                            <NavLink
                                to="/llmprompt"
                                className={({ isActive }) => (isActive ? 'active' : '')}
                            >
                                Системные промпты
                            </NavLink>
                        </li>
                        <li>
                            <NavLink
                                to="/qeprompt"
                                className={({ isActive }) => (isActive ? 'active' : '')}
                            >
                                QE промпты
                            </NavLink>
                        </li>
                        <li>
                            <button onClick={handleLogout}>Выход</button>
                        </li>
                    </>
                ) : (
                    <li>
                        <NavLink to="/login" className={({ isActive }) => (isActive ? 'active' : '')}>
                            Вход
                        </NavLink>
                    </li>
                )}
            </ul>
        </nav>
    );
};

export default Navbar;