'use client'

import React, { useLayoutEffect, useState } from 'react'
import PingAnimation from './animations/PingAnimation';

type Props = {
  visible?: boolean;
  bgOpacity?: number;
  delay?: number;
} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>

const LoadingOverlay = ({ visible = true, bgOpacity = 30, delay = 0, children = <PingAnimation /> }: Props) => {
  const [loaded, setLoaded] = useState(visible);

  useLayoutEffect(() => {
    setLoaded(visible);
  }, [visible]);

  if (!visible) {
    return null;
  }

  return (
    <div
      data-visible={visible}
      data-loaded={loaded}
      className={`absolute inset-0 flex items-center justify-center
                 backdrop-blur-sm bg-background/${bgOpacity}
                 transition-opacity duration-300 ease-in-out delay-${delay}
                 data-[loaded=false]:-z-50
                 data-[visible=true]:z-50
                 data-[visible=true]:opacity-100`}
    >
      {children}
    </div>
  )
}

export default LoadingOverlay
