import React, { useState } from 'react';

const Square = ({ value, onClick }) => (
  <button className="square" onClick={onClick}>
    {value}
    <style jsx>{`
      .square {
        width: 80px;
        height: 80px;
        font-size: 48px;
        font-weight: bold;
        border: 1px solid #999;
        background-color: #fff;
        cursor: pointer;
        transition: background-color 0.3s;
      }
      .square:hover {
        background-color: #f0f0f0;
      }
    `}</style>
  </button>
);

const Board = ({ squares, onClick }) => (
  <div className="board">
    {[0, 1, 2].map(row => (
      <div key={row} className="board-row">
        {[0, 1, 2].map(col => (
          <Square
            key={row * 3 + col}
            value={squares[row * 3 + col]}
            onClick={() => onClick(row * 3 + col)}
          />
        ))}
      </div>
    ))}
    <style jsx>{`
      .board {
        background-color: #fff;
        border: 2px solid #333;
        border-radius: 8px;
        overflow: hidden;
        margin: 20px 0;
      }
      .board-row {
        display: flex;
      }
    `}</style>
  </div>
);

const TicTacToe = () => {
  const [board, setBoard] = useState(Array(9).fill(null));
  const [xIsNext, setXIsNext] = useState(true);

  const calculateWinner = (squares) => {
    const lines = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8],
      [0, 3, 6],
      [1, 4, 7],
      [2, 5, 8],
      [0, 4, 8],
      [2, 4, 6],
    ];
    for (let i = 0; i < lines.length; i++) {
      const [a, b, c] = lines[i];
      if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
        return squares[a];
      }
    }
    return null;
  };

  const handleClick = (i) => {
    if (calculateWinner(board) || board[i]) return;
    const newBoard = [...board];
    newBoard[i] = xIsNext ? 'X' : 'O';
    setBoard(newBoard);
    setXIsNext(!xIsNext);
  };

  const winner = calculateWinner(board);
  let status;
  if (winner) {
    status = `Winner: ${winner}`;
  } else if (board.every(square => square)) {
    status = 'Draw!';
  } else {
    status = `Next player: ${xIsNext ? 'X' : 'O'}`;
  }

  const resetGame = () => {
    setBoard(Array(9).fill(null));
    setXIsNext(true);
  };

  return (
    <div className="game">
      <h1>Tic Tac Toe</h1>
      <Board squares={board} onClick={handleClick} />
      <div className="game-info">
        <div className="status">{status}</div>
        <button onClick={resetGame}>Reset Game</button>
      </div>
      <style jsx>{`
        .game {
          font-family: Arial, sans-serif;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 20px;
          background-color: #f0f0f0;
        }
        h1 {
          color: #333;
        }
        .game-info {
          margin-top: 20px;
          text-align: center;
        }
        .status {
          font-size: 24px;
          margin-bottom: 10px;
        }
        button {
          font-size: 18px;
          padding: 10px 20px;
          background-color: #4CAF50;
          color: white;
          border: none;
          border-radius: 5px;
          cursor: pointer;
          transition: background-color 0.3s;
        }
        button:hover {
          background-color: #45a049;
        }
      `}</style>
    </div>
  );
};

export default TicTacToe;