"use client"
 
import { useMemoryGame } from "@/hooks/use-memory-game"
 
const symbols = ["🙂", "😌", "😍", "🥰"]
 
export function Component() {
  const {
    cards,
    flipCard,
    startGame,
    resetGame,
    isGameComplete,
    matches,
    totalPairs,
    isStarted,
  } = useMemoryGame(symbols)
 
  return (
    <div>
      <h1>Memory Game</h1>
      {!isStarted && (
        <button
          style={{
            padding: "8px 16px",
            borderRadius: 4,
            background: "#222",
            color: "#fff",
            border: "none",
            cursor: "pointer",
          }}
          onClick={startGame}
        >
          Start Game
        </button>
      )}
      {isStarted && (
        <div>
          Matches: {matches} / {totalPairs}
        </div>
      )}
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 40px)",
          gap: "4px",
        }}
      >
        {cards.map((card) => (
          <button
            key={card.id}
            onClick={() => flipCard(card.id)}
            disabled={card.isFlipped || card.isMatched || !isStarted}
            style={{
              width: 40,
              height: 40,
              fontSize: 20,
              borderRadius: 4,
              background: card.isFlipped || card.isMatched ? "#3182ce" : "#eee",
              color: card.isFlipped || card.isMatched ? "#fff" : "#222",
              border: "1px solid #ccc",
              cursor:
                card.isFlipped || card.isMatched || !isStarted
                  ? "not-allowed"
                  : "pointer",
              margin: 2,
            }}
          >
            {card.isFlipped || card.isMatched ? card.value : "❓"}
          </button>
        ))}
      </div>
      {isGameComplete && <div>🎉 You won!</div>}
      {isStarted && (
        <button
          style={{
            padding: "8px 16px",
            borderRadius: 4,
            background: "#e53e3e",
            color: "#fff",
            border: "none",
            cursor: "pointer",
          }}
          onClick={resetGame}
        >
          Restart
        </button>
      )}
    </div>
  )
}