Accordion.astro

---
import AccordionItem from "./AccordionItem.astro";

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;
if (items?.some((i) => typeof i.title !== "string" || !i.title.trim())) {
  throw new Error("<Accordion> item has an empty title.");
}
const accordionId = items?.length
  ? `${variant}-${[...items.map((i) => i.title).join("")]
      .slice(0, 7)
      .map((c) => c.codePointAt(0))
      .join("-")}`
  : `${variant}-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>