import type { ReactNode } from 'react';
import woodButton from '../assets/ui/wood-button.webp';
import './AppTopBar.css';

interface Props {
  nickname: string;
  playerId: string;
  coins: number;
  diamonds: number;
  avatarText: string;
  subtitle?: string;
  onBack?: () => void;
  backLabel?: string;
  rightExtra?: ReactNode;
}

export function AppTopBar({
  nickname,
  playerId,
  coins,
  diamonds,
  avatarText,
  subtitle,
  onBack,
  backLabel = '返回',
  rightExtra,
}: Props) {
  return (
    <header className="app-topbar">
      <div className="app-topbar__left">
        {onBack && (
          <button type="button" className="app-topbar__back" aria-label={backLabel} onClick={onBack}>
            ←
          </button>
        )}
        <div className="app-topbar__avatar-frame" aria-hidden="true">
          <img className="app-topbar__avatar-frame-bg" src={woodButton} alt="" aria-hidden="true" />
          <span className="app-topbar__avatar-text">{avatarText}</span>
        </div>
        <div className="app-topbar__user">
          <span className="app-topbar__nickname">{nickname}</span>
          <span className="app-topbar__player-id">ID {playerId}</span>
          {subtitle ? <span className="app-topbar__subtitle">{subtitle}</span> : null}
        </div>
      </div>

      <div className="app-topbar__right">
        <div className="app-topbar__pill app-topbar__pill--coin">
          <span className="app-topbar__pill-label">金</span>
          <span className="app-topbar__pill-value">{coins.toLocaleString()}</span>
        </div>
        <div className="app-topbar__pill app-topbar__pill--diamond">
          <span className="app-topbar__pill-label">钻</span>
          <span className="app-topbar__pill-value">{diamonds.toLocaleString()}</span>
        </div>
        <button type="button" className="app-topbar__add" aria-label="充值">
          +
        </button>
        {rightExtra}
      </div>
    </header>
  );
}
