import { AccordionProps } from './types.js';
import Flex from '../Flex/index.js';
import AccordionItem from './AccordionItem/index.js';
import AccordionTitle from './AccordionTitle/index.js';
import AccordionContent from './AccordionContent/index.js';

const AccordionComponent = ({
  // Todo: figure out a good default gap for the accordion.
  gap = '24px',
  className = '',
  style = {},
  children,
}: AccordionProps) => {
  return (
    <Flex direction="column" gap={gap} className={className} style={style}>
      {children}
    </Flex>
  );
};

type AccordionType = typeof AccordionComponent;

const Accordion = AccordionComponent as AccordionType;

export default Accordion;
export { AccordionItem, AccordionTitle, AccordionContent };
