import { NavLink, useNavigate } from 'react-router-dom';
import { useAuth } from '../hooks/useAuth';

export default function Navbar() {
  const { user, logout } = useAuth();
  const navigate = useNavigate();

  async function handleLogout() {
    await logout();
    navigate('/');
  }

  return (
    <nav className="navbar">
      <div className="navbar-inner">
        <NavLink to="/" className="navbar-brand">
          ESP32 DIY <span>플랫폼</span>
        </NavLink>
        <div className="navbar-links">
          <NavLink to="/projects">프로젝트</NavLink>
          <NavLink to="/shop">상점</NavLink>
          {user && <NavLink to="/dashboard">대시보드</NavLink>}
          {user?.role === 'admin' && <NavLink to="/admin">관리자</NavLink>}
        </div>
        <div className="navbar-right">
          {user ? (
            <>
              <span style={{ color: 'var(--text2)', fontSize: 13, alignSelf: 'center' }}>
                {user.nickname}
              </span>
              <button className="btn btn-outline btn-sm" onClick={handleLogout}>로그아웃</button>
            </>
          ) : (
            <>
              <NavLink to="/auth/login" className="btn btn-outline btn-sm">로그인</NavLink>
              <NavLink to="/auth/register" className="btn btn-primary btn-sm">회원가입</NavLink>
            </>
          )}
        </div>
      </div>
    </nav>
  );
}
