import { Transition, Variants } from 'framer-motion';
import { BoxProps } from './Box';

interface Animation {
	/** The `transition` prop manages the animations transition */
	transition?: Transition;
	/** The `variants` prop manages the different states the animation can be in */
	variants?: Variants;
}

export type CollapseProps = {
	/** The `direction` prop sets the direction the wrapper will animate */
	direction?: Direction;
} & Animation &
	BoxProps &
	Visible;

export type Direction =
	| 'up'
	| 'down'
	| 'left'
	| 'right'
	| 'horizontal'
	| 'vertical';

type Distance = number;

export interface DirectionAndDistance {
	/** The `direction` prop sets the direction the wrapper will animate */
	direction?: Direction;
	/** The `distance` prop sets how far the wrapper will animate, higher distance feels "faster" */
	distance?: Distance;
}

export type FadeProps = {} & Animation & BoxProps & Visible;

export type SlideProps = {
	/** The `retract` prop determines if the slide will animate in reverse on exit */
	retract?: boolean;
} & Animation &
	BoxProps &
	DirectionAndDistance &
	Visible;

interface Visible {
	/** The `isVisible` prop is used to toggle an animation's state */
	isVisible?: boolean;
}