import Link from 'next/link'
import LogoutButton from './LogoutButton'

interface NavbarProps {
  userEmail: string
  isAdmin?: boolean
}

export default function Navbar({ userEmail, isAdmin }: NavbarProps) {
  return (
    <nav className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="flex h-16 items-center justify-between">
          <div className="flex items-center">
            <Link
              href="/dashboard"
              className="text-xl font-bold text-zinc-900 dark:text-zinc-50"
            >
              WebVNWrite
            </Link>
          </div>

          <div className="flex items-center gap-4">
            {isAdmin && (
              <Link
                href="/admin/invite"
                className="text-sm font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300"
              >
                Invite User
              </Link>
            )}
            <Link
              href="/dashboard/settings"
              className="text-sm font-medium text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-200"
            >
              Settings
            </Link>
            <span className="text-sm text-zinc-600 dark:text-zinc-400">
              {userEmail}
            </span>
            <LogoutButton />
          </div>
        </div>
      </div>
    </nav>
  )
}