import type { IMinigame } from "@/game-engien";
import { gameLibary } from "@/game-engien/games";
import { useGameStore } from "@/lib/store/game-store";
import { cn } from "@/lib/utils";
import Image from "next/image";
import React from "react";

function GameSelector() {
  const selectedGame = useGameStore((state) => state.selectedGame);
  const setSelectedGame = useGameStore((state) => state.setSelectedGame);
  return (
    <div className="grid w-full grid-cols-4 gap-4">
      {gameLibary.map((game) => (
        <GameCard
          key={game.id}
          game={game}
          selected={selectedGame?.id === game.id}
          onClick={() => setSelectedGame(game)}
        />
      ))}
    </div>
  );
}
const GameCard = ({
  game,
  selected,
  onClick,
}: {
  game: IMinigame;
  selected?: boolean;
  onClick?: () => void;
}) => {
  return (
    <div
      className={cn(
        "container-bg group w-full cursor-pointer items-center justify-between space-y-1 overflow-hidden",
        selected &&
          "before:bg-primary/40 before:absolute before:inset-0 before:-z-10 before:w-full before:animate-pulse before:rounded-md before:blur-xl",
      )}
      onClick={onClick}
    >
      <div className="relative h-20 w-full">
        <Image
          fill
          alt="game-image"
          src={game.thumbnail}
          className={cn(
            "object-cover opacity-50 transition-all duration-300 ease-in-out group-hover:opacity-90",
            selected && "opacity-100",
          )}
        />
      </div>
      <div className="flex items-center gap-2 px-4 pb-4">
        <div>
          <h4 className="font-meidum text-xl font-bold">{game.name}</h4>
          <div className="text-xs text-white/75">{game.description}</div>
        </div>
      </div>
    </div>
  );
};

export default GameSelector;
