import * as React from "react"
 
import { Difficulty, useSnakeGame } from "@/hooks/use-snake-game"
 
export function Component() {
  const [level, setLevel] = React.useState<Difficulty>(Difficulty.NORMAL)
  const {
    snake,
    food,
    isGameOver,
    score,
    resetGame,
    gridSize,
    isRunning,
    startGame,
    level: currentLevel,
  } = useSnakeGame(level)
 
  return (
    <div>
      <h1>Snake Game</h1>
      <div>Score: {score}</div>
      <div>
        Difficulty:
        {Object.values(Difficulty).map((lvl) => (
          <button
            key={lvl}
            onClick={() => {
              if (lvl !== level) {
                setLevel(lvl)
                resetGame()
              }
            }}
            style={{
              marginLeft: 8,
              padding: "6px 10px",
              borderRadius: 6,
              border: "1px solid #ccc",
              background: currentLevel === lvl ? "#111" : "#222",
              color: "#fff",
            }}
          >
            {lvl}
          </button>
        ))}
      </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>
  )
}