import  React      			from "react";
import  Header     			from "../components/header";
import  CSnippets  			from "../components/snippet";
import  Footer     			from "../components/footer";
import  {useRef, useState} 	from "react";
import  {useEffect} 		from "react";

const Home = () => {
	const [sec, setSec] = useState(2);

	useEffect(() => {
		if(sec === 0) return;
		const interval = setInterval(()=>{
 			setSec(sec=>sec-1)
		},1000)

		return () => { 
        	clearInterval(interval)	
        }
	}, [sec])

  	return sec===0 ? (
  		<>
	    	<div> 
	      		<Header/>
				<CSnippets/>
				<Footer/>
	    	</div>
    	</>
  	) : (
  		<div className="d-flex justify-content-center">
                <div className="spinner-grow" style={{width: "10rem", height: "10rem", marginTop: "20%"}} role="status">
                    <span className="sr-only">Loading...</span>
            	</div>
        	</div>
  	)
};

export default Home;
