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

/**
 * `Collapse` will trigger layout recalculations (because we're animating
 * height/width) and is generally not advised for performant use. Consider
 * using `Fade` or `Slide` instead. If layout churn is not an issue (absolute
 * positioning may help) it is typically safe to use.
 */

export const Collapse: FC<CollapseProps> = ({
	children,
	direction,
	isVisible,
	variants,
	...rest
}) => (
	<AnimatePresence>
		{isVisible && (
			<Box
				animate="open"
				custom={{ direction }}
				exit="close"
				initial="close"
				style={{ overflow: 'hidden' }}
				variants={variants}
				{...rest}>
				{children}
			</Box>
		)}
	</AnimatePresence>
);

Collapse.defaultProps = {
	direction,
	isVisible: false,
	variants,
};

export default Collapse;