import ClassName from 'classnames';
import React from 'react';

import './AppLoader.scss';

export const AppLoader = (props) => {
  const [isVisible, setIsVisible] = React.useState(false);

  React.useEffect(
    () => {
      setIsVisible(true);
    },
    [setIsVisible]
  );

  const className = ClassName('AppLoader', props.className, {
    visible: isVisible,
  });
  return (
    <div className={className}>
      <div className="main">
        <div className="brand">
          BTHLabs
        </div>
        <div className="logo">
          HomeHub
        </div>
        <div className="meta">
          <span>Loading...</span>
          <span>&copy; 2020-present by BTHLabs</span>
        </div>
      </div>
    </div>
  );
};
