import { useAuth } from '../store/AuthContext';
import { tl, NATIONS } from '../lib/format';
import { useLocation, useNavigate } from 'react-router-dom';

export default function BalancePill({ compact }) {
  const { user, balance, locked } = useAuth();
  const navigate = useNavigate();
  const bal = balance ?? user?.wallet?.balanceCents ?? null;

  return (
    <div className="balance-pill" title={`Kilitli: ${tl(locked ?? 0)}`}>
      <span className="balance-dot" />
      <span className="balance-amount mono">{tl(bal ?? 0)}</span>
      {!compact && (
        <button
          className="btn btn-sm btn-gold balance-deposit"
          onClick={() => navigate('/account?tab=wallet&action=deposit')}
        >
          + Yatır
        </button>
      )}
    </div>
  );
}

export function NationMark({ nation, size = 20 }) {
  if (!nation) return <span className="nation-none-mark" title="Ulus seçilmedi">🌐</span>;
  const n = NATIONS[nation];
  if (!n) return null;
  return (
    <span
      className="nation-mark"
      title={n.name}
      style={{ width: size, height: size, fontSize: size * 0.66, background: n.gradient }}
    >
      {n.icon}
    </span>
  );
}

export function NationTag({ nation }) {
  const n = NATIONS[nation];
  if (!n) return null;
  return (
    <span className="nation-tag" style={{ borderColor: n.color, color: n.color }}>
      <span>{n.icon}</span> {n.name}
    </span>
  );
}