import React, { FC } from 'react';
import { AnimatePresence } from 'framer-motion';
import { FadeProps } from 'types';
import { Box } from '../constants';
import { variants } from './variants';

/**
 * `Fade` is the most basic animation component. It is performant and is only
 * intended to animate opacity.
 */

export const Fade: FC<FadeProps> = ({
	children,
	isVisible,
	variants,
	...rest
}) => (
	<AnimatePresence>
		{isVisible && (
			<Box
				animate="open"
				exit="close"
				initial="close"
				variants={variants}
				{...rest}>
				{children}
			</Box>
		)}
	</AnimatePresence>
);

Fade.defaultProps = {
	isVisible: false,
	variants,
};

export default Fade;