Accordion.astro

---
import AccordionItem from "./AccordionItem.astro";
import { stableId } from "@/utils/stableId";

export interface AccordionItemType {
  title: string;
  content: string;
}

export interface Props {
  items?: AccordionItemType[];
  multiExpand?: boolean;
  variant?: "default" | "card";
}

const { items, multiExpand = false, variant = "default" } = Astro.props;
const titles = items?.map((i) => i.title) ?? [];
if (titles.some((t) => !t.trim())) {
  throw new Error("<Accordion> item has an empty title.");
}
const accordionId = `${variant}-${titles.length ? stableId(titles) : "slot"}`;
const accordionName = multiExpand ? undefined : `accordion-${accordionId}`;
---

<div class:list={["accordion", `accordion--${variant}`]}>
  {
    items ? (
      items.map((item) => (
        <AccordionItem
          title={item.title}
          content={item.content}
          variant={variant}
          name={accordionName}
        />
      ))
    ) : (
      <slot />
    )
  }
</div>

<style>
  .accordion {
    display: flex;
    flex-direction: column;
  }
</style>