import type { Resource } from "@elysium/types";
import { formatNumber } from "../../utils/format.js";

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

export const ResourceBar = ({ resources, prestigeCount, profileUrl }: 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>
    )}
    <a
      className="profile-link-button"
      href={profileUrl}
      rel="noreferrer"
      target="_blank"
      title="View your public profile"
    >
      👤 Profile
    </a>
  </header>
);