1import { Upgrade } from '../types';
 2import { formatNumber } from '../utils/formatters';
 3import '../styles/UpgradeShop.css';
 4
 5interface UpgradeShopProps {
 6  upgrades: Upgrade[];
 7  currency: number;
 8  onPurchase: (upgradeId: string) => void;
 9  prestigeMultiplier: number;
10}
11
12const UpgradeShop = ({ 
13  upgrades, 
14  currency, 
15  onPurchase,
16}: UpgradeShopProps) => {
17  const renderUpgradeValue = (upgrade: Upgrade) => {
18    switch (upgrade.type) {
19      case 'clickValue':
20        return `+${formatNumber(upgrade.value)} per click`;
21      case 'passive':
22        return `+${formatNumber(upgrade.value)} per second`;
23      case 'autoClick':
24        return `+${formatNumber(upgrade.value)} clicks per second`;
25      default:
26        return '';
27    }
28  };
29
30  return (
31    <div className="upgrade-shop">
32      <h2>Upgrades</h2>
33      
34      <div className="upgrades-list">
35        {upgrades.map(upgrade => {
36          const canAfford = currency >= upgrade.cost;
37          const maxedOut = upgrade.maxLevel !== undefined && upgrade.level >= upgrade.maxLevel;
38          
39          return (
40            <div 
41              key={upgrade.id} 
42              className={`upgrade-item ${canAfford ? 'can-afford' : 'cannot-afford'} ${maxedOut ? 'maxed-out' : ''}`}
43              onClick={() => canAfford && !maxedOut && onPurchase(upgrade.id)}
44            >
45              <div className="upgrade-icon">{upgrade.icon}</div>
46              
47              <div className="upgrade-info">
48                <h3>{upgrade.name} (Level {upgrade.level})</h3>
49                <p>{upgrade.description}</p>
50                <p className="upgrade-value">{renderUpgradeValue(upgrade)}</p>
51                
52                {maxedOut ? (
53                  <p className="max-level">MAX LEVEL</p>
54                ) : (
55                  <p className="upgrade-cost">
56                    Cost: {formatNumber(upgrade.cost)}
57                  </p>
58                )}
59              </div>
60            </div>
61          );
62        })}
63      </div>
64    </div>
65  );
66};
67
68export default UpgradeShop;