import type { Resource } from "@elysium/types";

interface ResourceBarProps {
  resources: Resource;
  prestigeCount: number;
}

const formatNumber = (value: number): string => {
  if (value >= 1_000_000_000) {
    return `${(value / 1_000_000_000).toFixed(2)}B`;
  }
  if (value >= 1_000_000) {
    return `${(value / 1_000_000).toFixed(2)}M`;
  }
  if (value >= 1_000) {
    return `${(value / 1_000).toFixed(2)}K`;
  }
  return value.toFixed(1);
};

export const ResourceBar = ({ resources, prestigeCount }: ResourceBarProps): React.JSX.Element => (
  <header className="resource-bar">
    <div className="resource">
      <span className="resource-icon">🪙</span>
      <span className="resource-value">{formatNumber(resources.gold)}</span>
      <span className="resource-label">Gold</span>
    </div>
    <div className="resource">
      <span className="resource-icon">✨</span>
      <span className="resource-value">{formatNumber(resources.essence)}</span>
      <span className="resource-label">Essence</span>
    </div>
    <div className="resource">
      <span className="resource-icon">💎</span>
      <span className="resource-value">{formatNumber(resources.crystals)}</span>
      <span className="resource-label">Crystals</span>
    </div>
    <div className="resource">
      <span className="resource-icon">🔮</span>
      <span className="resource-value">{formatNumber(resources.runestones)}</span>
      <span className="resource-label">Runestones</span>
    </div>
    {prestigeCount > 0 && (
      <div className="prestige-badge">
        ⭐ Prestige {prestigeCount}
      </div>
    )}
  </header>
);