import { NavLink, useNavigate } from 'react-router-dom'
import { tokenStore } from '../api/client.js'

export default function Topbar() {
  const nav = useNavigate()

  const logout = () => {
    tokenStore.clear()
    nav('/', { replace: true })
  }

  return (
    <header className="topbar">
      <NavLink to="/admin" className="brand" style={{ textDecoration: 'none', color: 'inherit' }}>
        <img className="logo" src="/logo.png" alt="" width={28} height={28} />
        <span>萌邮 MengPost</span>
      </NavLink>
      <nav>
        <NavLink to="/admin" end>
          概览
        </NavLink>
        <NavLink to="/admin/accounts">账户</NavLink>
        <a onClick={logout} style={{ cursor: 'pointer' }}>
          登出
        </a>
      </nav>
    </header>
  )
}
