import React, { ReactNode, useEffect, useState } from "react";
import StyledFade from "./StyledFade";

export type StyledFadeProps = {
  showContent: boolean;
  duration?: number;
};

export type FadeProps = StyledFadeProps & {
  children: ReactNode;
  props?: any;
};

const Fade: React.FC<FadeProps> = ({
  children,
  duration,
  showContent,
  ...props
}) => {
  const [showAnimation, setShowAnimation] = useState(showContent);

  useEffect(() => {
    if (showContent) setShowAnimation(showContent);
  }, [showContent]);

  return (
    <StyledFade
      duration={duration}
      onAnimationEnd={(e) => {
        if (!showContent) setShowAnimation(false);
      }}
      showContent={showContent}
      {...props}
    >
      {showAnimation && children}
    </StyledFade>
  );
};

export default Fade;