import { LitElement, html, css } from "lit";
import { property } from "lit/decorators.js";
export class PrimariaAccordion extends LitElement {
  @property({ type: Boolean })
  isOpen;

  static styles = css`
    :host {
      display: block;
    }

    .content {
      overflow: hidden;
      max-height: 0;
    }

    .content.open {
      margin-top: 8px;
      max-height: unset; 
    }

    .title {
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  `;

  toggle() {
    this.isOpen = !this.isOpen;
  }

  render() {
    return html`
    <div class="title" @click=${this.toggle}>
      <slot name="title"></slot>
      <dss-icon-button size="md" variant="primary" icon=${this.isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}></dss-icon-button>
    </div>
    <div class="content ${this.isOpen ? "open" : ""}">
      <slot name="content"></slot>
    </div>
    `;
  }
}