"use client";

type Props = {
  username?: string;
  isAdmin?: boolean;
};

export function AdminHeader({ username, isAdmin = false }: Props) {
  async function logout() {
    await fetch("/api/auth/logout", { method: "POST" });
    window.location.href = "/login";
  }

  return (
    <header className="flex flex-wrap items-center justify-between gap-4 border-b border-zinc-200 bg-white px-6 py-4 dark:border-zinc-800 dark:bg-zinc-950">
      <div>
        <h1 className="text-lg font-semibold tracking-tight text-zinc-900 dark:text-zinc-50">
          Kick Kings Admin Dashboard
        </h1>
        {username ? (
          <p className="mt-0.5 text-xs text-zinc-500 dark:text-zinc-400">
            Signed in as{" "}
            <span className="font-medium text-zinc-700 dark:text-zinc-300">
              {username}
            </span>
            {isAdmin ? " · admin" : null}
          </p>
        ) : null}
      </div>
      <button
        type="button"
        onClick={() => void logout()}
        className="rounded-lg border border-zinc-300 bg-white px-4 py-2 text-sm font-medium text-zinc-800 shadow-sm transition hover:bg-zinc-50 dark:border-zinc-600 dark:bg-zinc-900 dark:text-zinc-100 dark:hover:bg-zinc-800"
      >
        Log out
      </button>
    </header>
  );
}