---

// I stole ALLLLLL of this from https://webreaper.dev/posts/astro-accessible-accordion/

interface Props {
  title: string;
}

const { title } = Astro.props as Props;

import HR from "../HR.astro";

---

<noscript>
	<h2 class="text-xl text-title font-serif">
		{ title }
		<svg
      class="inline-flex h-7 w-7"
      aria-hidden="true"
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      ><path
        fill="none"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="m6 9l6 6l6-6"></path></svg
    >
	</h2>
	<slot/>
</noscript>

<div class="accordion group relative mb-2 rounded-md border border-crusta-900 dark:border-indigo-400 hidden">
  <button
    class="accordion__button flex w-full flex-1 items-center justify-between gap-2 p-3 text-left font-medium transition hover:text-subtitle sm:px-4"
    type="button"
    id={`${title} accordion menu button`}
    aria-expanded="false"
    aria-controls={`${title} accordion menu content`}
  >
    <span class="text-xl font-serif">{title}</span>

    <!-- if using astro and the astro-icon package 
    <Icon
      name="tabler:chevron-down"
      aria-hidden="true"
      class="accordion__chevron h-7 w-7 shrink-0 transition-transform"
    />
    -->

    <!-- use this is not using astro-icon (or another SVG you like) -->
    <svg
      class="accordion__chevron h-7 w-7 shrink-0 transition-transform"
      aria-hidden="true"
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      ><path
        fill="none"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="m6 9l6 6l6-6"></path></svg
    >

  </button>

  <div
    id={`${title} accordion menu content`}
    aria-labelledby={`${title} accordion menu button`}
    class="accordion__content hidden max-h-0 overflow-hidden px-3 transition-all duration-300 ease-in-out sm:px-4"
  >
  	<HR class="mt-0"/>
    <div class="prose mb-4 items-center mt-1 max-w-full transition-[height]">
      <slot/>
    </div>
  </div>
</div>

<script>
	function accordionSetup() {
		const menus = document.querySelectorAll(".accordion") as NodeListOf<HTMLElement>;	// set this up on each menu
		menus.forEach((menu) => {
			menu.classList.remove("hidden");

			const button = menu.querySelector(".accordion__button") as HTMLElement;		// the clickable banner
			const chevron = menu.querySelector(".accordion__chevron") as HTMLElement;	// the chevron icon that animates
			const content = menu.querySelector(".accordion__content") as HTMLElement;	// the stuff that's revealed when open

			if (button && content && chevron) {
				button.addEventListener("click", (event) => {
					if (!menu.classList.contains("active")) {	// if closed, stop having it be closed!
						menu.classList.add("active");
						button.setAttribute("aria-expanded", "true");

						// we need to set the max height to the height of the accordion object so the animations work correctly
						content.classList.remove("hidden");
						content.style.maxHeight = content.scrollHeight + "px";
						chevron.classList.add("rotate-180");
					} else {									// if open, stop having it be open!!!!
						menu.classList.remove("active");
						button.setAttribute("aria-expanded", "false");

						content.style.maxHeight = '0px';
						chevron.classList.remove("rotate-180");

						// make text invisible after animation
						setTimeout(() => { content.classList.add("hidden") }, 300);
					}
					event.preventDefault();
					return false;
				})
			}
		})
	}

	accordionSetup();

	document.addEventListener("astro:after-swap", accordionSetup);
</script>