FAQ accordion

<script module lang="ts">
	export interface FaqItem {
		question: string;
		/** Plain text answer. Line breaks are preserved. */
		answer: string;
	}
</script>

<script lang="ts">
	interface Props {
		items: FaqItem[];
		title: string;
		description?: string;
		headingLevel?: 2 | 3 | 4 | 5;
		multiple?: boolean;
		defaultOpen?: number[];
	}

	let {
		items,
		title,
		description,
		headingLevel = 2,
		multiple = false,
		defaultOpen = []
	}: Props = $props();

	const uid = $props.id();
	const sectionHeading = $derived(`h${headingLevel}`);
	const itemHeading = $derived(`h${headingLevel + 1}`);

	function initialOpen(): number[] {
		return multiple ? [...defaultOpen] : defaultOpen.slice(0, 1);
	}

	let open = $state<number[]>(initialOpen());

	function toggle(index: number) {
		if (open.includes(index)) {
			open = open.filter((i) => i !== index);
		} else {
			open = multiple ? [...open, index] : [index];
		}
	}
</script>

<section class="px-4 py-16 sm:px-6 lg:px-8" aria-labelledby="{uid}-title">
	<div class="mx-auto max-w-3xl">
		<svelte:element
			this={sectionHeading}
			id="{uid}-title"
			class="text-3xl font-semibold tracking-tight text-balance text-zinc-900 sm:text-4xl"
		>
			{title}
		</svelte:element>
		{#if description}
			<p class="mt-4 text-base text-pretty text-zinc-600 sm:text-lg">{description}</p>
		{/if}

		<div class="mt-10 divide-y divide-zinc-200 border-y border-zinc-200">
			{#each items as item, index (index)}
				{@const expanded = open.includes(index)}
				<div>
					<svelte:element this={itemHeading} class="m-0 text-base font-medium">
						<button
							type="button"
							id="{uid}-trigger-{index}"
							aria-expanded={expanded}
							aria-controls="{uid}-panel-{index}"
							onclick={() => toggle(index)}
							class="flex w-full items-start justify-between gap-6 py-5 text-left text-zinc-900 hover:text-zinc-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-900"
						>
							<span class="min-w-0 break-words">{item.question}</span>
							<svg
								class={[
									'mt-0.5 size-5 shrink-0 text-zinc-500 transition-transform motion-reduce:transition-none',
									expanded && 'rotate-180'
								]}
								viewBox="0 0 20 20"
								fill="none"
								aria-hidden="true"
							>
								<path
									d="M5 7.5l5 5 5-5"
									stroke="currentColor"
									stroke-width="1.75"
									stroke-linecap="round"
									stroke-linejoin="round"
								/>
							</svg>
						</button>
					</svelte:element>
					<div id="{uid}-panel-{index}" hidden={!expanded} class="pr-11 pb-5">
						<p class="text-base break-words whitespace-pre-line text-zinc-600">{item.answer}</p>
					</div>
				</div>
			{/each}
		</div>
	</div>
</section>