import React from 'react';
import { images } from '../../assets';
import { TokenPack } from '../../constants/tokenPacks';
import styles from './TokenPackCard.module.css';

interface TokenPackCardProps extends TokenPack {
  onBuy: () => void;
  className?: string;
  compact?: boolean;
}

const TokenPackCard: React.FC<TokenPackCardProps> = ({
  title,
  tokens,
  bonusTokens,
  stickersCount,
  price,
  priceRub,
  description,
  isPopular,
  isBestValue,
  onBuy,
  className = ''
}) => {
  return (
    <div 
      className={`${styles.card} ${isPopular ? styles.popular : ''} ${isBestValue ? styles.bestValue : ''} ${className}`}
      onClick={onBuy} // Добавляем обработчик клика на всю карточку
      style={{ cursor: 'pointer' }} // Добавляем стиль курсора, чтобы показать, что карточка кликабельна
    >
      {isPopular && (
        <div className={`${styles.badge} ${styles.popularBadge}`}>
          Популярный выбор
        </div>
      )}
      {isBestValue && (
        <div className={`${styles.badge} ${styles.bestValueBadge}`}>
          Максимальная выгода
        </div>
      )}
      
      <h3 className={styles.title}>{title}</h3>
      
      <div className={styles.tokenInfo}>
        <img src={images.tokenIcon} alt="Токены" className={styles.tokenIcon} />
        <div className={styles.tokenCount}>
          <span className={styles.baseTokens}>{tokens}</span>
          {bonusTokens > 0 && (
            <span className={styles.bonusTokens}>+{bonusTokens} БОНУС</span>
          )}
        </div>
      </div>
      
      <div className={styles.stickersCount}>
        {stickersCount} стикеров
      </div>
      
      {description && (
        <p className={styles.description}>{description}</p>
      )}
      
      <div className={styles.priceSection}>
        <div className={styles.price}>
          {price} Stars ⭐
        </div>
        <button 
          className={styles.buyButton}
          onClick={(e) => {
            e.stopPropagation(); // Предотвращаем всплытие события
            onBuy();
          }}
        >
          КУПИТЬ
        </button>
      </div>
    </div>
  );
};

export default TokenPackCard;
