import { Upgrade } from '../types';
import { formatNumber } from '../utils/formatters';
import '../styles/UpgradeShop.css';

interface UpgradeShopProps {
  upgrades: Upgrade[];
  currency: number;
  onPurchase: (upgradeId: string) => void;
  prestigeMultiplier: number;
}

const UpgradeShop = ({ 
  upgrades, 
  currency, 
  onPurchase,
}: UpgradeShopProps) => {
  const renderUpgradeValue = (upgrade: Upgrade) => {
    switch (upgrade.type) {
      case 'clickValue':
        return `+${formatNumber(upgrade.value)} per click`;
      case 'passive':
        return `+${formatNumber(upgrade.value)} per second`;
      case 'autoClick':
        return `+${formatNumber(upgrade.value)} clicks per second`;
      default:
        return '';
    }
  };

  return (
    <div className="upgrade-shop">
      <h2>Upgrades</h2>
      
      <div className="upgrades-list">
        {upgrades.map(upgrade => {
          const canAfford = currency >= upgrade.cost;
          const maxedOut = upgrade.maxLevel !== undefined && upgrade.level >= upgrade.maxLevel;
          
          return (
            <div 
              key={upgrade.id} 
              className={`upgrade-item ${canAfford ? 'can-afford' : 'cannot-afford'} ${maxedOut ? 'maxed-out' : ''}`}
              onClick={() => canAfford && !maxedOut && onPurchase(upgrade.id)}
            >
              <div className="upgrade-icon">{upgrade.icon}</div>
              
              <div className="upgrade-info">
                <h3>{upgrade.name} (Level {upgrade.level})</h3>
                <p>{upgrade.description}</p>
                <p className="upgrade-value">{renderUpgradeValue(upgrade)}</p>
                
                {maxedOut ? (
                  <p className="max-level">MAX LEVEL</p>
                ) : (
                  <p className="upgrade-cost">
                    Cost: {formatNumber(upgrade.cost)}
                  </p>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default UpgradeShop;