// @flow

import React, { Component, type Node } from 'react';
import { Provider } from 'mobx-react';
import { createAccordionStore } from '../accordionStore/accordionStore';

type AccordionProps = {
    accordion: boolean,
    children: Node,
    className: string,
    onChange: Function,
};

class Accordion extends Component<AccordionProps, *> {
    static defaultProps = {
        accordion: true,
        onChange: () => {},
        className: 'accordion',
        children: null,
    };

    accordionStore = createAccordionStore({
        accordion: this.props.accordion,
        onChange: this.props.onChange,
    });

    render() {
        const { className, children } = this.props;
        const { accordion } = this.accordionStore;

        return (
            <Provider accordionStore={this.accordionStore}>
                <div role={accordion ? 'tablist' : null} className={className}>
                    {children}
                </div>
            </Provider>
        );
    }
}

export default Accordion;

@@ -35,20 +35,28 @@
 t, type 
-Node
+ElementProps
  %7D from 
@@ -194,24 +194,46 @@
 rdionProps =
+ ElementProps%3C'div'%3E &
  %7B%0A    accor
@@ -251,51 +251,8 @@
 an,%0A
-    children: Node,%0A    className: string,%0A
     
@@ -643,27 +643,51 @@
 t %7B 
-className, children
+accordion: accordionProp, onChange, ...rest
  %7D =
@@ -889,83 +889,19 @@
 ll%7D 
-className=%7BclassName%7D%3E%0A                    %7Bchildren%7D%0A                %3C/div
+%7B...rest%7D /
 %3E%0A  

Update Accordion to respect arbitrary user-defined props.