"use client"
 
import { useRockPaperScissors } from "@/hooks/use-rock-paper-scissors"
 
export function Component() {
  const { playerChoice, computerChoice, result, score, play, reset } =
    useRockPaperScissors()
 
  return (
    <div>
      <h1>Rock Paper Scissors</h1>
      <div>
        <button
          onClick={() => play("rock")}
          style={{
            padding: "8px 16px",
            borderRadius: 4,
            background: "#222",
            color: "#fff",
            border: "none",
            cursor: "pointer",
            marginRight: 8,
          }}
        >
          Rock
        </button>
        <button
          onClick={() => play("paper")}
          style={{
            padding: "8px 16px",
            borderRadius: 4,
            background: "#222",
            color: "#fff",
            border: "none",
            cursor: "pointer",
            marginRight: 8,
          }}
        >
          Paper
        </button>
        <button
          onClick={() => play("scissors")}
          style={{
            padding: "8px 16px",
            borderRadius: 4,
            background: "#222",
            color: "#fff",
            border: "none",
            cursor: "pointer",
          }}
        >
          Scissors
        </button>
      </div>
      {result && (
        <div>
          <p>You chose: {playerChoice}</p>
          <p>Computer chose: {computerChoice}</p>
          <p>Result: {result}</p>
        </div>
      )}
      <div>
        <p>Wins: {score.wins}</p>
        <p>Losses: {score.losses}</p>
        <p>Draws: {score.draws}</p>
      </div>
      <button
        onClick={reset}
        style={{
          padding: "8px 16px",
          borderRadius: 4,
          background: "#e53e3e",
          color: "#fff",
          border: "none",
          cursor: "pointer",
          marginTop: 8,
        }}
      >
        Reset Game
      </button>
    </div>
  )
}