"use client";
import React from "react";

export type DelayProps = { children?: React.ReactNode, delay?: number, useOpacity?: boolean, onComplete?: () => void, shouldWait?: boolean };
export default function Delay({ children, delay, useOpacity, onComplete, shouldWait }: DelayProps) {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    if (delay == undefined) {
      return;
    }

    if (shouldWait) {
      return;
    }
    const intervalRef = setInterval(() => {
      setShow(true);
      if (onComplete) {
        setInterval(onComplete, 0);
      }
    }, delay);

    return () => clearInterval(intervalRef);
  }, [shouldWait, delay, onComplete]);

  if (useOpacity) {
    return <div className={`${ show ? "opacity-100" : "opacity-0"} transition-opacity ease-in-out duration-300`}>{children}</div>
  }

  return <>{show && children}</>
}