"use client";

import { UserRound } from "lucide-react";

import { cn } from "@/lib/utils";
import { usePlayerSessionStore } from "@/stores/player-session-store";

/**
 * 顶栏：当前玩家称呼 + 默认币种（依赖入口或 Hydrate 拉取的 profile）。
 */
export function PlayerSessionBar({ className }: { className?: string }) {
  const profile = usePlayerSessionStore((s) => s.profile);

  const label =
    profile?.nickname?.trim() ||
    profile?.username?.trim() ||
    (profile?.id != null ? `玩家 #${profile.id}` : null);

  return (
    <div
      className={cn(
        "flex min-w-0 max-w-[55%] items-center gap-1.5 sm:max-w-[60%]",
        className,
      )}
    >
      <span className="flex size-7 shrink-0 items-center justify-center rounded-full bg-muted">
        <UserRound className="size-3.5 text-muted-foreground" aria-hidden />
      </span>
      <div className="min-w-0 leading-tight">
        <p className="truncate text-xs font-medium text-foreground">
          {label ?? "…"}
        </p>
        {profile?.default_currency ? (
          <p className="truncate text-[10px] text-muted-foreground">
            {profile.default_currency.toUpperCase()}
            {profile.locale ? (
              <span className="text-muted-foreground/80">
                {" "}
                · {profile.locale}
              </span>
            ) : null}
          </p>
        ) : null}
      </div>
    </div>
  );
}