// @flow
import React from 'react';
import type { ControllableExpanderProps } from './controllable-expander.proptypes';
import { UnstyledButton } from '../unstyled-button';

export const ControllableExpander = ({
  children,
  HeadingComponent,
  isOpen = false,
  onToggle,
  buttonStyles,
  'data-qa': dataQa,
  'data-cy': dataCy,
  id,
}: ControllableExpanderProps) => {
  return (
    <>
      <UnstyledButton
        style={buttonStyles}
        onClick={onToggle}
        data-cy={dataCy}
        data-qa={dataQa}
        id={id}
        aria-haspopup
        aria-expanded={isOpen}
      >
        <HeadingComponent isOpen={isOpen} />
      </UnstyledButton>
      {isOpen ? children : null}
    </>
  );
};

ControllableExpander.displayName = 'ControllableExpander';
