import React, { useContext, useEffect } from "react";
import { useInView } from "react-intersection-observer";

import "./index.scss";
import BtnContact from "../btnContact";
import HeaderContext from "../../context/headerContext";

const Header = () => {
	const navbarContext = useContext(HeaderContext);
	const { ref, inView } = useInView({
		threshold: 0.065
	});

	const handleVisibility = (x) => {
		navbarContext.isHeaderHiddenFct(x);
	};

	useEffect(() => {
		handleVisibility(inView);
	}, [inView]);

	return (
		<header ref={ref}>
			<div className="hero">
				<h1>Coopérative Libre Informatique</h1>
				<div className="hero-box">
					<div className="hero-text">
						<p className="hero-paragraph">
							Développement, formation, assistance et réseau : des services
							sur-mesure à votre portée.
						</p>
						<p className="hero-highlight">
							Demandez nous un devis, nous vous répondrons en moins de 24
							heures.
						</p>
					</div>
					<BtnContact>Écrivez-nous !</BtnContact>
				</div>
			</div>
		</header>
	);
};

export default Header;
