"use client";

import Link from "next/link";
import { useSession, signOut } from "next-auth/react";

export default function Navbar() {
  const { data: session } = useSession();

  return (
    <nav className="bg-green-800 text-white px-6 py-3 flex items-center justify-between shadow-lg">
      <Link href="/" className="text-xl font-bold flex items-center gap-2">
        ⚽ فانتزی جام جهانی
      </Link>
      <div className="flex items-center gap-6 text-sm font-medium">
        <Link href="/matches" className="hover:text-green-300 transition">بازی‌ها</Link>
        <Link href="/players" className="hover:text-green-300 transition">بازیکنان</Link>
        <Link href="/leaderboard" className="hover:text-green-300 transition">جدول</Link>
        {session ? (
          <>
            <Link href="/team" className="hover:text-green-300 transition">تیم من</Link>
            <Link href="/quiz" className="hover:text-green-300 transition">کوییز</Link>
            <Link href="/golden-cards" className="hover:text-green-300 transition">کارت ویژه</Link>
            <Link href="/shop" className="hover:text-green-300 transition">فروشگاه</Link>
            <Link href="/profile" className="hover:text-green-300 transition">پروفایل</Link>
            {(session.user as any).role === "ADMIN" && (
              <Link href="/admin" className="bg-yellow-500 text-black px-3 py-1 rounded-lg hover:bg-yellow-400 transition">
                ادمین
              </Link>
            )}
            <button
              onClick={() => signOut({ callbackUrl: "/" })}
              className="bg-red-600 px-3 py-1 rounded-lg hover:bg-red-700 transition"
            >
              خروج
            </button>
          </>
        ) : (
          <Link href="/login" className="bg-white text-green-800 px-4 py-1 rounded-lg font-bold hover:bg-green-100 transition">
            ورود
          </Link>
        )}
      </div>
    </nav>
  );
}
