"use client"
 
import { useNumberGame } from "@/hooks/use-number-game"
 
export function Component() {
  const {
    guess,
    message,
    attempts,
    makeGuess,
    resetGame,
    gameOver,
    hasWon,
    hasLost,
    targetNumber,
    history,
    maxAttempts,
  } = useNumberGame({ maxAttempts: 10, revealTarget: false, min: 1, max: 100 })
 
  return (
    <div>
      <h1>Number Guessing Game</h1>
      <p>{message}</p>
      {!gameOver && (
        <form
          onSubmit={(e) => {
            e.preventDefault()
            const value = Number(e.target.elements.guess.value)
            makeGuess(value)
            e.target.reset()
          }}
        >
          <input name="guess" type="number" min={1} max={100} />
          <button
            type="submit"
            style={{
              padding: "8px 16px",
              borderRadius: 4,
              background: "#222",
              color: "#fff",
              border: "none",
              cursor: "pointer",
              marginLeft: 8,
            }}
          >
            Guess
          </button>
        </form>
      )}
      {gameOver && (
        <button
          onClick={resetGame}
          style={{
            padding: "8px 16px",
            borderRadius: 4,
            background: "#e53e3e",
            color: "#fff",
            border: "none",
            cursor: "pointer",
          }}
        >
          Play Again
        </button>
      )}
      <div>
        Attempts: {attempts} / {maxAttempts}
      </div>
      {history.length > 0 && (
        <ul>
          {history.map((entry, i) => (
            <li key={i}>
              {entry.guess}: {entry.label}
            </li>
          ))}
        </ul>
      )}
      {hasWon && <div>🎉 You won!</div>}
      {hasLost && <div>❌ You lost! The number was {targetNumber}.</div>}
    </div>
  )
}