"use client";
import { useAtom } from "jotai";
import { useGameResult, useGuessAt, useVariants } from "../../lib/hooks";
import { Button } from "../ui/button";

interface Props {
  index: number;
}

export function GameButton({ index }: Props) {
  const [label, incrValue] = useGameButton(index);
  const isWin = useGameResult();

  return (
    <button
      onClick={() => incrValue()}
      // variant={isWin ? "noShadow" : "reverse"}
      className="flex h-auto text-4xl p-0 justify-center items-center text-main"
    >
      <span className={isWin ? "animate-bounce" : ""}>{label}</span>
    </button>
  );
}

function useGameButton(index: number) {
  const variants = useVariants();
  const guessAtom = useGuessAt(index);
  const [currentGuess, incrementGuess] = useAtom(guessAtom);
  const label = currentGuess === -1 ? "•" : variants[currentGuess];

  return [label, incrementGuess] as const;
}