<script lang="ts">
  import Accordion from '../accordion/Accordion.svelte';

  export let options: { title: string; text: string }[];
</script>

{#if options.length}
  <h2 id="faq">FAQ</h2>
  <div class="faq-list" itemscope="" itemtype="https://schema.org/FAQPage">
    {#each options as option}
      <div class="faq-item" itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question">
        <h3 class="faq-q" itemprop="name">{option.title}</h3>
        <div class="faq-a" itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
          <p itemprop="text">{option.text}</p>
        </div>
      </div>
    {/each}
  </div>
{/if}

<style lang="scss">
  @import '../../scss/media';
  @import '../../scss/mixins';
  @import '../../scss/variables';

  /* FAQ */
  .faq-list { margin-top: 1.5em; }
  .faq-item { margin-bottom: 1.5em; padding-bottom: 1.5em; border-bottom: 1px solid #eaedf0; }
  .faq-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
  .faq-q { font-size: 1.0625rem; font-weight: 600; color: #141414; margin: 0 0 0.5em; }
  .faq-a p { margin: 0; font-size: 1rem; line-height: 1.7; color: #323232; }
</style>