import { useEffect, useState } from 'react';
import './Spinner.css';

interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
  show: boolean;
  delay?: number;
}

export const Spinner = ({ show, delay = 140, ...props }: SpinnerProps) => {
  const [render, setRender] = useState(delay ? false : show ? true : false);

  useEffect(() => {
    if (show && delay) {
      const timeoutId = setTimeout(() => {
        setRender(true);
      }, delay);
      return () => {
        if (timeoutId) {
          clearTimeout(timeoutId);
        }
      };
    } else if (show) {
      setRender(true);
    } else {
      setRender(false);
    }
  }, [delay, show]);

  return render ? (
    <div className="overlay" {...props}>
      <div className="spinner"></div>
    </div>
  ) : null;
};