// whenever we're using JSX, we need to import React
import React, { useState } from "react";

const Hooks = props => {
	// [current value, sets/assigns the new value ] = useState(initial value)
	const [count, setCount] = useState(props.initialCount);

	// naming convention should describe the function

	const tagahawakNgPagdagdag = () => {
		// console.log("clicker");
		setCount(bilang => ++bilang);
	};

	const tagahawakNgPagbawas = () => {
		console.log("clicker");
		setCount(bilang => --bilang);
	};

	return (
		<div>
			<p>Hello from the Hooks Component</p>
			<p>{props.isaPang + " " + props.initialCount}</p>
			<p>display current count: {count}</p>
			<button onClick={tagahawakNgPagdagdag}>increment</button>
			<button onClick={tagahawakNgPagbawas}>decrement</button>
		</div>
	);
};

// export the Hooks component
export default Hooks;