import {Component, Prop, h} from '@stencil/core';

@Component({
  tag: 'hy-accordion-container',
  styleUrl: 'accordion-container.scss',
  shadow: false
})
export class AccordionContainer {
  @Prop() accordionid?: string;

  /*
  * data-allow-toggle
    Allow for each toggle to both open and close individually

  data-allow-multiple
    Allow for multiple accordion sections to be expanded at the same time.
    Assumes data-allow-toggle otherwise you would not be able to close any of the accordions
  */

  render() {
    const classAttributes = ['hy-accordion-container', 'js-hy-accordion'];
    const id = this.accordionid.toLowerCase().replace(/\W/g, '-');
    return (
      <div id={id} class={classAttributes.join(' ')} data-allow-multiple="true" data-allow-toggle="true">
        <slot></slot>
      </div>
    );
  }
}