import React, { FC } from 'react';
import { MenuProps } from 'types';
import { Box, Slide } from '../wrappers';
import { useComponentLogic } from './hooks';

export const Menu: FC<MenuProps> = props => {
	const { children, className, close, direction, distance, id, open, ...rest } =
		props;
	const { ref } = useComponentLogic(props);
	return (
		<Slide
			direction={direction}
			distance={distance}
			isVisible={open}
			position="relative"
			retract>
			<Box className={className} ref={ref} position="absolute" {...rest}>
				{children}
			</Box>
		</Slide>
	);
};

Menu.defaultProps = {
	className: '',
	id: 'missing-id',
	shouldCloseOnClickOutside: true,
};

export default Menu;