1import { PrestigeUpgrade } from '../types';
 2import { formatNumber } from '../utils/formatters';
 3import '../styles/PrestigePanel.css';
 4
 5interface PrestigePanelProps {
 6  totalCurrency: number;
 7  prestigePoints: number;
 8  prestigeUpgrades: PrestigeUpgrade[];
 9  onPrestige: () => void;
10  onPurchaseUpgrade: (upgradeId: string) => void;
11}
12
13const PrestigePanel = ({
14  totalCurrency,
15  prestigePoints,
16  prestigeUpgrades,
17  onPrestige,
18  onPurchaseUpgrade
19}: PrestigePanelProps) => {
20  // Calculate how many prestige points would be earned
21  const potentialPrestigePoints = Math.floor(Math.sqrt(totalCurrency / 1000000));
22  
23  return (
24    <div className="prestige-panel">
25      <h2>Prestige</h2>
26      
27      <div className="prestige-info">
28        <p>Total Currency Earned: {formatNumber(totalCurrency)}</p>
29        <p>Current Prestige Points: {formatNumber(prestigePoints)}</p>
30        <p>Prestige Now For: {formatNumber(potentialPrestigePoints)} points</p>
31        
32        <button 
33          className="prestige-button"
34          onClick={onPrestige}
35          disabled={potentialPrestigePoints <= 0}
36        >
37          PRESTIGE
38        </button>
39      </div>
40      
41      <div className="prestige-upgrades">
42        <h3>Prestige Upgrades</h3>
43        
44        <div className="prestige-upgrades-list">
45          {prestigeUpgrades.map(upgrade => {
46            const canAfford = prestigePoints >= upgrade.cost;
47            
48            return (
49              <div 
50                key={upgrade.id} 
51                className={`prestige-upgrade-item ${canAfford ? 'can-afford' : 'cannot-afford'} ${upgrade.purchased ? 'purchased' : ''}`}
52                onClick={() => canAfford && !upgrade.purchased && onPurchaseUpgrade(upgrade.id)}
53              >
54                <div className="prestige-upgrade-icon">{upgrade.icon}</div>
55                
56                <div className="prestige-upgrade-info">
57                  <h4>{upgrade.name}</h4>
58                  <p>{upgrade.description}</p>
59                  <p>Multiplier: +{upgrade.multiplierBonus.toFixed(2)}x</p>
60                  
61                  {upgrade.purchased ? (
62                    <p className="purchased-label">PURCHASED</p>
63                  ) : (
64                    <p className="prestige-upgrade-cost">
65                      Cost: {formatNumber(upgrade.cost)} PP
66                    </p>
67                  )}
68                </div>
69              </div>
70            );
71          })}
72        </div>
73      </div>
74    </div>
75  );
76};
77
78export default PrestigePanel;