"use client";

import Link from "next/link";
import { ThemeToggle } from "@/app/components/ThemeToggle";
import styles from "./vip.module.css";

type VipHeaderProps = {
  isLoggedIn: boolean;
  userName?: string | null;
  onLogout?: () => void;
};

export function VipHeader({ isLoggedIn, userName, onLogout }: VipHeaderProps) {
  return (
    <header className={styles.header}>
      <Link
        href="https://digital.hackrobot.cn/zh"
        className={styles.logo}
        target="_blank"
        rel="noopener"
      >
        🌍 异度星球
      </Link>
      <nav className={styles.nav}>
        <ThemeToggle />
        {isLoggedIn ? (
          <div className={styles.userBadge} style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
            <span>{userName || "会员"}</span>
            {onLogout && (
              <button
                type="button"
                onClick={onLogout}
                className={styles.loginLink}
                style={{ background: "none", border: "none", cursor: "pointer", padding: 0, fontSize: "inherit" }}
              >
                退出
              </button>
            )}
          </div>
        ) : (
          <Link href="/#login" className={styles.loginLink}>
            登录
          </Link>
        )}
      </nav>
    </header>
  );
}