'use client'

import React, { useEffect, 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(false);

  useEffect(() => {
    // Trigger fade-in after mount
    const timeout = setTimeout(() => setLoaded(visible), 300);
    return () => clearTimeout(timeout);
  }, [visible]);

  return (
    <div
      data-visible={visible}
      data-loaded={loaded}
      className={`absolute inset-0 flex items-center justify-center
                 backdrop-blur-sm bg-background/${bgOpacity}
                 opacity-0 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