// BoutiqueCard.jsx — Legacy shop card (shop.json boosters)
// TODO: Migrate to economy.ts generator system in a future step
import "../scss/components/boutiquecard.scss";
import "../scss/components/buttons.scss";
import PropTypes from "prop-types";
import { useGameStore } from "../store/useGameStore";

export default function BoutiqueCard({
  name,
  price,
  incrementValue,
  description,
  image,
  type,
}) {
  const resources = useGameStore((s) => s.state.resources);

  // Legacy shop — disabled for now, generators are in GeneratorShop
  const canAfford = resources >= price;

  return (
    <div className="shopcardcontainer">
      <div className="shopcontainer">
        <div
          className="cardpicture"
          style={{ backgroundImage: `url(${image})` }}
          alt={`image de ${name}`}
        />
        <div>
          <div className="titlesection">
            <p className="itemname">{name}</p>
            <div className="price">
              <p className="itemprice">{price}</p>
              <div className="priceicon" />
            </div>
          </div>
          <div className="description">
            <p className="itemdesc">
              <em>
                {type} + {incrementValue}
              </em>
            </p>
            <p className="itemdesc">{description}</p>
          </div>
        </div>
        <button
          disabled={!canAfford}
          className="primary-button"
          style={{ opacity: canAfford ? 1 : 0.5 }}
        >
          Bientôt
        </button>
      </div>
    </div>
  );
}

BoutiqueCard.propTypes = {
  name: PropTypes.string.isRequired,
  price: PropTypes.number.isRequired,
  incrementValue: PropTypes.number.isRequired,
  description: PropTypes.string.isRequired,
  image: PropTypes.string.isRequired,
  type: PropTypes.string.isRequired,
};
