'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, valor) => {
        if (cuadros[indexItem] === '') { // Solo actualiza si el cuadro está vacío
            const misCuadros = cuadros.slice();
            misCuadros[indexItem] = valor; // Coloca el valor ('X' o 'O') en el cuadro
            setCuadros(misCuadros);

            // Alterna el turno
            setTurno(turno === 'X' ? 'O' : 'X');
        }
    };

    return (
        <>
            <h1 className="px-5 text-5xl font-extrabold text-white text-center mt-20">Totito</h1> {/* Titulo */}
            <div className="mt-10 p-5 grid grid-cols-3 gap-4 items-center">
                {
                cuadros.map((items, indexItem) => (
                    <Cuadrado 
                        key={indexItem} 
                        valor={items}
                        alHcerClick={(valor) => pintaFigura(indexItem, valor)}
                    />
                ))}
            </div>
        </>
    );
};

export default Tablero;