//Aqui esta el contenido del home
import {useState} from "react"; //esto permite que al cambiar variables, por medio del hook se actualice el contenido del html

const Home = () => {
	function ahora() {
		var d = new Date(); // for now
		let ahorita = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
		return ahorita;
	}
	//let hora = ahora();//Asi se queda fija, solo es la hora al cargar la pagina
	let [hora, SetHora] = useState(ahora());//asi React sabe que al usar la función SetHora actualiza la variable y el contenido html
	let [nombre, CambiarNombre] = useState("Nombe inicial");

	const handleClick = (e) => {
		SetHora(ahora()); //esto actualiza la variable hora en el template y el valor, pero no dentro de la misma funcion...
		console.log("Aqui vez todas las propiedades del evento click, por si algo te sirve... ", e);
		console.log('Se hizo click, la hora t-1 es ' + hora); //la hora esta fija porque es la hora a la que cargo. 
		//AUN corriendo SetHora, lleva delay de t-1 por estar SetHora en la misma funcion
	}

	const ClickDeNuevo = (name, e) => {
		CambiarNombre(name);//actualiza el nombre
		console.log('hola ' + name, e.target); //la propiedad target es donde se hizo click
		console.log('Al correr la función el nombre es ' + nombre); //la propiedad target es donde se hizo click
	}

	return ( <div className = "home" >
		<h2> Homepage </h2> 
		<p>Hola {nombre}, La hora es {hora} </p> 
		<button onClick = {handleClick} > Act. la hora </button>{/* el() normal llama la función onload */} 
		<button onClick = {
			(e) => {/*Asi pasas en la e, las propiedades del evento click por si te sirven...*/
				ClickDeNuevo('Alex', e);
			} //esto igual que arriba es una anonymous function que llama a otra funcion
		} > Act. Nombre </button>{/* Esto equiv a onclick = "ClickDeNuevo(Alex);" */} 
	</div>
	);
}

export default Home;
