IconAccordion icon

---
interface Props {
  items?: { icon?: string; title: string; body: string }[];
  theme?: 'light' | 'dark';
}

const {
  items = [],
  theme = 'light',
} = Astro.props;
---

<section class:list={['bl-section', 'ia-section', `ia-section--${theme}`]}>
  <div class="bl-inner">
    <div class="ia-wrap">
      {items.map((item, i) => (
        <details class="ia-item" open={i === 0}>
          <summary class="ia-summary">
            {item.icon && <span class="ia-icon" aria-hidden="true">{item.icon}</span>}
            <span class="ia-title">{item.title}</span>
            <span class="ia-chevron" aria-hidden="true">▾</span>
          </summary>
          <div class="ia-body">
            <p>{item.body}</p>
          </div>
        </details>
      ))}
    </div>
  </div>
</section>

<style>
  .ia-section { background: var(--color-bg, #fff); }
  .ia-section--dark { background: #0a0a0a; }
  .ia-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 680px;
  }
  .ia-item {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .2s;
  }
  .ia-section--dark .ia-item { border-color: #2a2a2a; }
  .ia-item[open] { border-color: var(--color-accent, #6366f1); }
  .ia-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: #fff;
  }
  .ia-section--dark .ia-summary { background: #161616; }
  .ia-summary::-webkit-details-marker { display: none; }
  .ia-icon { font-size: 1.4rem; flex-shrink: 0; width: 32px; text-align: center; }
  .ia-title {
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary, #0a0a0a);
  }
  .ia-section--dark .ia-title { color: #e8e8e8; }
  .ia-chevron {
    font-size: 1.1rem;
    color: var(--color-accent, #6366f1);
    transition: transform .25s;
  }
  .ia-item[open] .ia-chevron { transform: rotate(180deg); }
  .ia-body { padding: 0 20px 18px 64px; background: #fafafa; }
  .ia-section--dark .ia-body { background: #111; }
  .ia-body p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.65;
    color: #374151;
  }
  .ia-section--dark .ia-body p { color: #aaa; }
</style>