---
import { render } from 'astro:content';
const { heading = 'Frequently asked questions', entries = [] } = Astro.props;
const items = await Promise.all(entries.map(async (entry) => ({ ...entry.data, Content: (await render(entry)).Content })));
if (!items.length) return;
---
<section class="section faq-section" aria-labelledby="faq-heading">
  <div class="shell narrow"><p class="eyebrow">Helpful answers</p><h2 id="faq-heading">{heading}</h2><div class="faq-list">{items.map((item) => <details><summary>{item.question}</summary><div class="faq-answer"><item.Content /></div></details>)}</div></div>
</section>