---
interface FaqItem {
  q: string;
  a: string;
}

interface Props {
  items: FaqItem[];
}
const { items } = Astro.props;

const groupId = `faq-${Math.random().toString(36).slice(2, 8)}`;
---
<div class="divide-y" style="border-color: var(--hds-line);">
  {items.map((item, idx) => {
    const inputId = `${groupId}-${idx}`;
    return (
      <details class="group" style="border-color: var(--hds-line);">
        <summary
          class="flex items-start justify-between gap-4 py-5 cursor-pointer list-none transition-colors"
          style="color: var(--hds-fg);"
        >
          <h3 class="text-base md:text-lg font-semibold pr-4">{item.q}</h3>
          <span class="flex-shrink-0 mt-1 icon-circle transition-transform group-open:rotate-45" style="width: 28px; height: 28px;">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
              <line x1="12" y1="5" x2="12" y2="19"/>
              <line x1="5" y1="12" x2="19" y2="12"/>
            </svg>
          </span>
        </summary>
        <div class="pb-5 pr-12 text-[15px] leading-relaxed" style="color: var(--hds-fg-soft);">
          {item.a}
        </div>
      </details>
    );
  })}
</div>