'use client'

import { useState } from "react"
import Cuadrado from "./cuadros"

const Tablero =()=>{
    const [cuadros, setCuadros] = useState(Array(9).fill(""));
    const [turno, setTurno]=useState('X')
    
    const pintaFigura=(indexItem)=>{
        const misCuaadros=cuadros.slice()
        misCuaadros.splice(indexItem,1,turno)
        setCuadros(misCuaadros) // esta linea me da problemas

        if(turno==='X'){
            setTurno('O')
        }else{
            setTurno('X')
        }
    }
    return(
        <h1 class="px-5 text-5xl font-extrabold text-red-950 text-center">totito</h1>,// Titulo
        <div class="p-5 grid grid-cols-3 gap-4 items-center">  
        { //cuerpo e interactividad
            cuadros.map((items, indexItem)=>{
                return <Cuadrado 
                            key={indexItem} 
                            valor={items}
                            alHcerClick={()=> pintaFigura(indexItem)}
                        />
            })
        }
        </div>
    )
}

export default Tablero