import Image from "next/image";
import { Game } from "../types/Game";

interface GameSelectionProps {
  games: Game[];
  selectedGame: Game | null;
  onSelect: (game: Game) => void;
}

export function GameSelection({ games, selectedGame, onSelect }: GameSelectionProps) {
  return (
    <div className="grid grid-cols-3 gap-4 mb-6">
      {games.map((game) => (
        <div
          key={game.id}
          className={`p-4 cursor-pointer rounded-xl border-2 transition-transform duration-300
          ${selectedGame?.id === game.id 
            ? "scale-110 border-gray-400 bg-gray-800" 
            : game.isAvailable 
              ? "border-gray-600 bg-[rgb(10,10,10)] hover:scale-105 hover:border-gray-400"
              : "border-gray-800 bg-[rgb(5,5,5)] opacity-50 cursor-not-allowed"
          }`}
          onClick={() => game.isAvailable && onSelect(game)}
        >
          <Image
            src={game.thumbnail}
            alt={game.name}
            width={100}
            height={100}
            className="mb-2 rounded-md"
          />
          <h3 className="text-center text-sm">{game.name}</h3>
          {!game.isAvailable && (
            <p className="text-center text-xs text-gray-500 mt-1">Coming Soon</p>
          )}
        </div>
      ))}
    </div>
  );
}