import { usePageLoading } from '@websolutespa/bom-mixer-hooks';
import styled from 'styled-components';

export type PageLoaderProps = {
  children?: React.ReactNode;
};

const StyledLoader = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100000;
  opacity: 0;
  transition: opacity ease-in-out 300ms;
  pointer-events: none;

  &[data-loading=true] {
    opacity: 1;
  }
`;

const StyledContent = styled.div`
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00000022;
  display: flex;
  justify-content: center;
  align-items: center;

  [data-loading=true] > & {
    pointer-events: auto;
  }
`;

export function PageLoader({ children }: PageLoaderProps) {
  const { loading } = usePageLoading();
  return (
    <StyledLoader data-loading={loading}>
      {children || <StyledContent />}
    </StyledLoader>
  );
}