import { useNavigate } from 'react-router-dom'
import { logout } from '../../api/auth'
import { useAuthStore } from '../../store/authStore'

export default function Navbar() {
  const navigate = useNavigate()
  const { user, clearAuth } = useAuthStore()

  async function handleLogout() {
    try { await logout() } catch { /* ignore network errors */ }
    clearAuth()
    navigate('/login', { replace: true })
  }

  return (
    <nav className="bg-gray-900 border-b border-gray-800 px-6 py-3 flex items-center justify-between">
      <button
        onClick={() => navigate(user?.role === 'instructor' ? '/instructor/dashboard' : '/student/dashboard')}
        className="text-white font-semibold text-lg tracking-tight hover:text-indigo-400 transition-colors"
      >
        InterviewMentor
      </button>
      {user && (
        <div className="flex items-center gap-4">
          <span className="text-gray-400 text-sm">{user.full_name}</span>
          <button
            onClick={handleLogout}
            className="text-sm text-gray-400 hover:text-white transition-colors"
          >
            Sign out
          </button>
        </div>
      )}
    </nav>
  )
}