import React from 'react';
import { NavLink } from 'react-router-dom';
import { navLinks } from '../routes.jsx';
import { useIsMobile } from '../hooks/useIsMobile';
import mainLogo from '../assets/main_logo.png';
import './Navbar.css';

const Navbar = () => {
    const isMobile = useIsMobile();

    // 모바일에서는 BottomNav가 대체하므로 사이드바 미렌더링
    if (isMobile) return null;

    return (
        <aside className="sidebar">
            <div className="sidebar__brand">
                <img src={mainLogo} alt="Logo" className="sidebar__logo" />
                <div className="sidebar__brand-text">
                    <p className="sidebar__brand-name">Jaeoh</p>
                    <p className="sidebar__brand-sub">MANAGEMENT ROOM</p>
                </div>
            </div>

            <div className="sidebar__divider" />

            <nav className="sidebar__nav">
                <p className="sidebar__section-label">NAVIGATION</p>
                {navLinks.map((link) => (
                    <NavLink
                        key={link.id}
                        to={link.path}
                        className={({ isActive }) =>
                            `sidebar__item${isActive ? ' is-active' : ''}`
                        }
                        style={{ '--item-accent': link.accent }}
                        end={link.path === '/'}
                    >
                        <span className="sidebar__item-icon">{link.icon}</span>
                        <span className="sidebar__item-label">{link.label}</span>
                        <span className="sidebar__item-dot" />
                    </NavLink>
                ))}
            </nav>

            <div className="sidebar__footer">
                <div className="sidebar__divider" />
                <div className="sidebar__footer-content">
                    <div className="sidebar__status">
                        <span className="sidebar__status-dot" />
                        <span className="sidebar__status-text">System Online</span>
                    </div>
                    <p className="sidebar__version">v2.0.0</p>
                </div>
            </div>
        </aside>
    );
};

export default Navbar;