import React from 'react';
import { Accordion as BAccordion, AccordionProps as BootstrapAccordionProps, AccordionBodyProps as BootstrapAccordionBodyProps } from 'react-bootstrap';
import './Accordion.scss';

interface AccordionProps extends BootstrapAccordionProps {
  options: Array<{
    id: string;
    title: React.ReactNode;
    component: React.ReactNode;
    bodyOptions?: BootstrapAccordionBodyProps  }>;
}

const Accordion = ({ options, ...props }: AccordionProps) => {

  return (
    <BAccordion {...props}>
      {
        options.map(item => (
          <BAccordion.Item key={item.id} eventKey={item.id}>
            <BAccordion.Header>{item.title}</BAccordion.Header>
            <BAccordion.Body {...item.bodyOptions}>
              {item.component}
            </BAccordion.Body>
          </BAccordion.Item>
        ))
      }
    </BAccordion>
  );
};

export default Accordion;
export { Accordion, AccordionProps };