import React from 'react';

import { Accordion as AccordionStyle } from '../../styles/components/main/Accordion.style';
import {
  AccordionItem,
  AccordionItemButton,
  AccordionItemHeading,
  AccordionItemPanel,
  AccordionItemState,
  resetNextUuid
} from 'react-accessible-accordion';
import 'react-accessible-accordion/dist/fancy-example.css';

interface Props {
  items: { title: string; answer: JSX.Element }[];
}

const Accordion: React.FC<Props> = ({ items }) => {
  resetNextUuid();
  return (
    <AccordionStyle allowZeroExpanded>
      {items.map(({ title, answer }, index) => (
        <AccordionItem key={`accordion-${index}`}>
          <AccordionItemState>
            {({ expanded }) => (
              <div className={expanded ? 'expanded' : ''}>
                <AccordionItemHeading>
                  <AccordionItemButton>{title}</AccordionItemButton>
                </AccordionItemHeading>
                <AccordionItemPanel>
                  {answer}
                </AccordionItemPanel>
              </div>
            )}
          </AccordionItemState>
        </AccordionItem>
      ))}
    </AccordionStyle>
  );
};

export default Accordion;