import { formatNumber } from '../utils/formatters';
import '../styles/Header.css';

interface HeaderProps {
  currency: number;
  clickValue: number;
  passiveIncome: number;
  autoClickRate: number;
  prestigePoints: number;
  prestigeMultiplier: number;
}

const Header = ({ 
  currency, 
  clickValue, 
  passiveIncome, 
  autoClickRate, 
  prestigePoints,
  prestigeMultiplier
}: HeaderProps) => {
  return (
    <header className="game-header">
      <h1>Clicker Game</h1>
      
      <div className="stats-container">
        <div className="stat-item">
          <h2>{formatNumber(currency)}</h2>
          <p>Currency</p>
        </div>
        
        <div className="stat-item">
          <h3>Click Value: {formatNumber(clickValue)}</h3>
          <h3>Passive: {formatNumber(passiveIncome)}/sec</h3>
          <h3>Auto Clicks: {formatNumber(autoClickRate)}/sec</h3>
        </div>
        
        <div className="stat-item prestige-stats">
          <h3>Prestige Points: {formatNumber(prestigePoints)}</h3>
          <h3>Multiplier: {prestigeMultiplier.toFixed(2)}x</h3>
        </div>
      </div>
    </header>
  );
};

export default Header;