'use client'

import { useRouter } from 'next/navigation'
import NavLink from './NavLink'

interface Props {
  username: string
  isAdmin: boolean
}

export default function HeaderNav({ username, isAdmin }: Props) {
  const router = useRouter()

  async function handleLogout() {
    await fetch('/api/auth/logout', { method: 'POST' })
    router.push('/login')
    router.refresh()
  }

  return (
    <div className="flex items-center gap-3">
      {isAdmin && <NavLink href="/manage">Manage</NavLink>}
      <span className="text-sm" style={{ color: 'var(--text-secondary)' }}>
        {username}
      </span>
      <button
        onClick={handleLogout}
        className="text-sm px-3 py-1.5 rounded-lg transition-colors"
        style={{ color: 'var(--text-secondary)' }}
        onMouseEnter={(e) => {
          (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'
          ;(e.currentTarget as HTMLElement).style.color = 'var(--text-primary)'
        }}
        onMouseLeave={(e) => {
          ;(e.currentTarget as HTMLElement).style.backgroundColor = 'transparent'
          ;(e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)'
        }}
      >
        Sign Out
      </button>
    </div>
  )
}