Build XO App with AI

import React, { useState, useEffect } from 'react';

const App = () => {
  const [board, setBoard] = useState(Array(9).fill(null));
  const [isXNext, setIsXNext] = useState(true);
  const [winner, setWinner] = useState(null);
  const [difficulty, setDifficulty] = useState('easy');

  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 (winner || board[i]) return;
    const newBoard = board.slice();
    newBoard[i] = isXNext ? 'X' : 'O';
    setBoard(newBoard);
    setIsXNext(!isXNext);
    setWinner(calculateWinner(newBoard));
  };

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

  const renderSquare = (i) => {
    return (
      <button
        className="w-24 h-24 bg-blue-500 text-white text-4xl font-bold rounded-lg shadow-lg hover:bg-blue-600 transition duration-300"
        onClick={() => handleClick(i)}
      >
        {board[i]}
      </button>
    );
  };

  const status = winner ? `Winner: ${winner}` : `Next player: ${isXNext ? 'X' : 'O'}`;

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4">
      <h1 className="text-5xl font-bold mb-8 text-gray-800">Tic Tac Toe</h1>
      <div className="text-2xl font-semibold mb-4 text-gray-700">{status}</div>
      <div className="grid grid-cols-3 gap-4">
        {[0, 1, 2].map((i) => renderSquare(i))}
        {[3, 4, 5].map((i) => renderSquare(i))}
        {[6, 7, 8].map((i) => renderSquare(i))}
      </div>
      <button
        className="mt-8 px-6 py-2 bg-red-500 text-white text-lg font-semibold rounded-lg shadow-lg hover:bg-red-600 transition duration-300"
        onClick={resetGame}
      >
        Reset Game
      </button>
    </div>
  );
};

export default App;