---
export interface AccordionItem {
  id: string;
  title: string;
  content?: string; // Optional plain text content
  htmlContent?: string; // Optional HTML content instead of plain text
}

export interface Props {
  items: AccordionItem[];
  allowMultiple?: boolean;
  variant?: "default" | "bordered" | "flush";
}

const { items, allowMultiple = false, variant = "default" } = Astro.props;
---

<div class={`ast-accordion ast-accordion--${variant}`} data-allow-multiple={allowMultiple}>
  {
    items.map((item, index) => (
      <div class="ast-accordion__item" data-accordion-item>
        <h3 class="ast-accordion__header">
          <button
            class="ast-accordion__trigger"
            type="button"
            aria-expanded="false"
            aria-controls={`ast-accordion-content-${item.id}`}
            id={`ast-accordion-trigger-${item.id}`}
            data-accordion-trigger>
            <span class="ast-accordion__title">{item.title}</span>
            <span class="ast-accordion__icon" aria-hidden="true">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
              </svg>
            </span>
          </button>
        </h3>

        <div
          class="ast-accordion__content"
          id={`ast-accordion-content-${item.id}`}
          aria-labelledby={`ast-accordion-trigger-${item.id}`}
          role="region"
          data-accordion-content>
          <div class="ast-accordion__body" inert>
            {item.htmlContent ? (
              <div set:html={item.htmlContent} />
            ) : item.content ? (
              <p set:html={item.content} />
            ) : null}
          </div>
        </div>
      </div>
    ))
  }
</div>