"use client";
import React, { useState } from 'react';
import Tablero from './funciones';
const Home = () => {
  const [data, setData] = useState({ labels: [], values: [] });

  const handleClick = () => {
    const rangoX = Number(document.getElementById("rangox").value);
    const xi = Number(document.getElementById("xi").value);

    // Generar una lista de números desde xi hasta rangoX
    const labels = [];
    const values = [];
    for (let i = xi; i <= rangoX; i++) {
      labels.push(i);
      values.push(i); // Puedes ajustar la función aquí si deseas otros valores
    }

    setData({ labels, values });
  };

  return (
    <div className="p-5">
      {/* Entradas */}
      <div className='border-2 p-5 w-60'>
        <h1>Datos:</h1>
        <input
          id="rangox"
          type="number"
          className="border-4 rounded-3xl px-2"
          placeholder='Escribe el límite en X'
        />
        <br />
        <input
          id="xi"
          type="number"
          className="mt-4 border-4 rounded-3xl px-2"
          placeholder='Escribe el inicio en X'
        />
        <br />
        <button
          id='btne'
          className='mt-2 px-6 py-1 bg-blue-500 rounded-full text-white font-bold'
          onClick={handleClick}
        >
          Enter
        </button>
      </div>
      {/* Tablero */}
      <Tablero data={data} />
    </div>
  );
};

export default Home;