import React, {ReactNode, useState} from 'react';
import logo from '../../../assets/images/eGov-logo-white.png'
import './loadingpage.scss'
import {useEffect} from "react";

type LoadingPageProps = {
    children?: ReactNode
}

const interval = 500
const maxDots = 3

const LoadingPage = ({children}: LoadingPageProps) => {

    const [dots, setDots] = useState(0)

    useEffect(() => {

        const id = setInterval(() => setDots((dots)=>(dots+1)%4), interval);

        return () => clearInterval(id);
    }, []);


    return (
       <div className={'d-flex flex-column'} id={'loadingPage'}>
           <img src={logo} width={253} height={80} alt="" className={'mb-5'}/>
           <p>LOADING <span>{new Array(dots).fill('.')}</span></p>
       </div>
    );
}

export default LoadingPage;