import { useState } from 'react'

import Square from './components/Square';

import './App.css'

function App() {

const [history, setHistory] = useState(Array(9).fill(null));

const [isXturn,setIsXturn]=useState(true);

const checkWinner=()=>{

const Winner=[[0,1,2],[3,4,5],[6,7,8],[0,3,6],[0,4,8],[2,5,8],[1,4,7],[2,4,6]];

for (const logic of Winner) {

const [a,b,c] = logic;

if(history[a]!=null && history[a]===history[b] && history[a]===history[c]){

return true;

}

}

return false;

}

const isWinner=checkWinner();

const handleCheck=(index)=>{

if(history[index]){

return;

}

const copyState=[...history];

copyState[index]=isXturn?"X":"O";

setHistory(copyState);

setIsXturn(!isXturn);

}

const reset=()=>{

setHistory(Array(9).fill(null));

}

return (

<div className=' my-50 p-10 h-100'>

{isWinner?<><h1 className='flex justify-center items-center text-6xl'>{!isXturn?"X":"O"}won </h1> <button className='text-4xl' onClick={()=>reset()}>Play again</button> </>:<div className='flex justify-items-center w-full h-full border-3 min-w-fit'>

<div className='w-full'>

<Square value={history[0]} onClick={()=>handleCheck(0)}></Square>

<Square value={history[1]} onClick={()=>handleCheck(1)}></Square>

<Square value={history[2]} onClick={()=>handleCheck(2)}></Square>

</div>

<div className='w-full'>

<Square value={history[3]} onClick={()=>handleCheck(3)}></Square>

<Square value={history[4]} onClick={()=>handleCheck(4)}></Square>

<Square value={history[5]} onClick={()=>handleCheck(5)}></Square>

</div>

<div className='w-full'>

<Square value={history[6]} onClick={()=>handleCheck(6)}></Square>

<Square value={history[7]} onClick={()=>handleCheck(7)}></Square>

<Square value={history[8]} onClick={()=> handleCheck(8)}></Square>

</div>

</div>}

</div>

)

}

export default App