import { cn } from "@/lib/utils";
import Image from "next/image";
import React from "react";
type Game = {
  id: number;
  name: string;
  description: string;
  image: string;
  minPlayers: number;
  maxPlayers: number;
};
const mokGames: Array<Game> = [
  {
    id: 1,
    name: "Mok Game 1",
    description: "A simple game of strategy and luck",
    image: "/game-placeholder.jpg",

    maxPlayers: 2,
    minPlayers: 2,
  },
  {
    id: 2,
    name: "Mok Game 2",
    description: "A simple game of strategy and luck",
    image: "/game-placeholder.jpg",

    maxPlayers: 2,
    minPlayers: 2,
  },
  {
    id: 3,
    name: "Mok Game 3",
    description: "A simple game of strategy and luck",
    image: "/game-placeholder.jpg",

    maxPlayers: 2,
    minPlayers: 2,
  },
];

function GameSelector({
  selectGame,
  selectedGame,
}: {
  selectGame?: (gameId: Game["id"]) => void;
  selectedGame?: Game["id"];
}) {
  const [selected, setSelected] = React.useState(selectedGame ?? 1);
  return (
    <div className="container-bg grid w-full grid-cols-3 gap-4 p-6">
      {mokGames.map((game) => (
        <GameCard
          key={game.id}
          game={game}
          selected={selected === game.id}
          onClick={() => setSelected(game.id)}
        />
      ))}
    </div>
  );
}
const GameCard = ({
  game,
  selected,
  onClick,
}: {
  game: Game;
  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.image}
          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;
