import React, {useEffect, useState} from 'react';

import {SPINNER_COLOR, SPINNER_SIZE, SpinnerProps} from './types';
import {SpinnerContainer, SpinnerView} from './style';

const Spinner = ({
  delay = 0,
  center = false,
  size = SPINNER_SIZE.MD,
  color = SPINNER_COLOR.BLACK,
}: SpinnerProps) => {
  const [show, setShow] = useState<boolean>(delay === 0);

  useEffect(() => {
    const timer = setTimeout(() => {
      setShow(true);
    }, delay);

    return () => {
      clearTimeout(timer);
    };
  }, [delay]);

  return (
    <SpinnerContainer show={show} center={center}>
      <SpinnerView size={size} color={color} />
    </SpinnerContainer>
  );
};

export {SPINNER_COLOR, SPINNER_SIZE};

export default Spinner;