"use client"
 
import { useTicTacToe } from "@/hooks/use-tic-tac-toe"
 
export function Component() {
  const {
    board,
    currentPlayer,
    winner,
    isDraw,
    gameOver,
    makeMove,
    resetGame,
    playerNames,
  } = useTicTacToe({ X: "Alice", O: "Bob" })
 
  return (
    <div>
      <h1>Tic Tac Toe</h1>
      <div>
        {gameOver
          ? winner
            ? `${playerNames[winner]} wins!`
            : "It's a draw!"
          : `${playerNames[currentPlayer]}'s turn`}
      </div>
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 40px)",
          gap: "4px",
        }}
      >
        {board.map((cell, idx) => (
          <button
            key={idx}
            onClick={() => makeMove(idx)}
            disabled={!!cell || gameOver}
            style={{
              width: 40,
              height: 40,
              fontSize: 20,
              borderRadius: 4,
              background: cell ? "#3182ce" : "#eee",
              color: cell ? "#fff" : "#222",
              border: "1px solid #ccc",
              cursor: !!cell || gameOver ? "not-allowed" : "pointer",
              margin: 2,
            }}
          >
            {cell}
          </button>
        ))}
      </div>
      {gameOver && (
        <button
          onClick={resetGame}
          style={{
            padding: "8px 16px",
            borderRadius: 4,
            background: "#e53e3e",
            color: "#fff",
            border: "none",
            cursor: "pointer",
            marginTop: 8,
          }}
        >
          Play Again
        </button>
      )}
    </div>
  )
}