import React, { FC } from 'react';
import Box from 'components/Box';
import { Collapse } from 'components/wrappers';
import { AccordionProps } from 'types';
import AccordionHeader from './AccordionHeader';

export const Accordion: FC<AccordionProps> = ({
	background,
	children,
	className,
	direction,
	headerClassName,
	open,
	title,
	toggle,
	...rest
}) => {
	return (
		<Box className={className} {...rest}>
			<AccordionHeader
				background={background}
				className={headerClassName}
				title={title}
				toggle={toggle}
			/>
			<Collapse direction={direction} isVisible={open}>
				{children}
			</Collapse>
		</Box>
	);
};

Accordion.defaultProps = {
	open: false,
	title: 'Accordion Header',
};

export default Accordion;