import { Link, useNavigate } from 'react-router-dom'
import { useStore } from '../store'

export function Navbar() {
  const { user, logout } = useStore()
  const navigate = useNavigate()

  const handleLogout = () => {
    logout()
    navigate('/')
  }

  return (
    <nav>
      <Link to="/" className="logo">AI 剧本杀</Link>
      <div className="nav-links">
        <Link to="/scripts">剧本库</Link>
        {user ? (
          <>
            <Link to="/history">历史记录</Link>
            <span style={{ color: '#aaa', fontSize: 14 }}>{user.nickname}</span>
            <button className="btn-ghost" onClick={handleLogout}>退出</button>
          </>
        ) : (
          <Link to="/login">登录</Link>
        )}
      </div>
    </nav>
  )
}