"use client"
 
import { useSnakeGame } from "@/hooks/use-snake-game"
 
export function Component() {
  const {
    snake,
    food,
    isGameOver,
    score,
    resetGame,
    gridSize,
    isRunning,
    startGame,
  } = useSnakeGame()
 
  return (
    <div>
      <h1>Snake Game</h1>
      <div>Score: {score}</div>
      {/* Render your grid here using snake and food positions */}
      {!isRunning && !isGameOver && (
        <button
          style={{
            padding: "8px 16px",
            borderRadius: 4,
            background: "#222",
            color: "#fff",
            border: "none",
            cursor: "pointer",
          }}
          onClick={startGame}
        >
          Start Game
        </button>
      )}
      {isGameOver && (
        <button
          style={{
            padding: "8px 16px",
            borderRadius: 4,
            background: "#e53e3e",
            color: "#fff",
            border: "none",
            cursor: "pointer",
          }}
          onClick={resetGame}
        >
          Restart Game
        </button>
      )}
    </div>
  )
}