ClickerZ/Frontend/src/components/GeneratorShop.tsx

// GeneratorShop.tsx — Boutique de générateurs (economy.ts)

import { useGameStore } from "../store/useGameStore";
import { formatNumber } from "../utils/formatNumber";

export function GeneratorShop() {
  const generators = useGameStore((s) => s.state.generators);
  const resources = useGameStore((s) => s.state.resources);
  const productionPerSecond = useGameStore((s) => s.productionPerSecond);
  const buy = useGameStore((s) => s.buy);
  const generatorCost = useGameStore((s) => s.generatorCostWithTree);

  return (
    <div className="gp">
      <div className="flex justify-between items-center">
        <span className="gp-title" title="Achète des générateurs pour produire des têtards automatiquement">Générateurs</span>
        <span className="gp-value gp-accent-green" title="Production totale par seconde">{formatNumber(productionPerSecond)}/s</span>
      </div>
      {generators.map((gen) => {
        const cost = generatorCost(gen);
        const canAfford = resources >= cost;
        const currentProd = gen.baseProduction * gen.owned;

        return (
          <div
            key={gen.id}
            className={`gp-row ${canAfford ? "gp-row--active" : "gp-row--locked"}`}
          >
            <div className="flex flex-col min-w-0">
              <div className="flex items-center gap-1">
                <span className="gp-value">{gen.name}</span>
                {gen.owned > 0 && (
                  <span className="gp-label gp-accent-green">x{gen.owned}</span>
                )}
              </div>
              <span className="gp-label">
                +{gen.baseProduction}/s
                {gen.owned > 0 && ` · ${formatNumber(currentProd)}/s total`}
              </span>
            </div>
            <button
              onClick={() => buy(gen.id)}
              disabled={!canAfford}
              className={`gp-btn ${canAfford ? "gp-btn--buy" : "gp-btn--disabled"}`}
            >
              {formatNumber(cost)}
            </button>
          </div>
        );
      })}
    </div>
  );
}