import { Link } from 'react-router-dom';
import { tl } from '../lib/format';

// Oyun kartı — katalogdan gelen GameInfo gösterir
export default function GameCard({ game, index }) {
  return (
    <Link
      to={`/game/${game.slug}`}
      className="game-card glass glass-hover"
      style={
        {
          '--gcolor': game.color || '#d4af37',
          animationDelay: `${(index || 0) * 0.06}s`,
        }
      }
    >
      <div className="game-card-glow" />
      <div className="game-card-head">
        <span className="game-card-icon">{game.icon}</span>
        {game.popular && <span className="game-card-pop">Popüler</span>}
      </div>
      <h3 className="game-card-title">{game.title}</h3>
      <p className="game-card-sub">{game.subtitle}</p>
      <p className="game-card-tagline tiny">{game.tagline}</p>
      <div className="game-card-foot">
        <span className="tiny faint">
          {tl(game.minBet)} – {tl(game.maxBet)}
        </span>
        <span className="game-card-play">Oyna →</span>
      </div>
    </Link>
  );
}