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

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

<div class="block-faq">
  <div class="container">
    <div class="block-faq__wrapper">
      <div class="block-faq__text">
        <div class="block-faq__title">Frequently Asked Questions</div>
        <div class="block-faq__subtitle">
          Can't find the answer to your question? <br />Feel free to
          <span><a href={'javascript:void(0);'}>contact us</a></span>
        </div>
      </div>
      <div class="block-faq__list">
        {#each options as option}
          <Accordion title={option.title} text={option.text} />
        {/each}
      </div>
    </div>
  </div>
</div>

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

  .block-faq {
    padding: 64px 0;

    @include breakpoint-down('deskS') {
      padding-top: 40px;
      padding-bottom: 0;
    }

    @include breakpoint-down('tabM') {
      padding: 100px 0;
    }

    &__wrapper {
      display: flex;
      justify-content: flex-end;
      gap: 160px;

      @include breakpoint-down('deskL') {
        gap: 128px;
      }

      @include breakpoint-down('deskS') {
        flex-direction: column;
        gap: 22px;
      }
    }

    &__text {
      width: 100%;
      max-width: 440px;

      @include breakpoint-down('deskS') {
        margin-inline: auto;
      }
    }

    &__list {
      width: 100%;
      max-width: 680px;

      @include breakpoint-down('deskL') {
        max-width: 544px;
      }

      @include breakpoint-down('deskS') {
        max-width: none;
      }

      & :global(.accordion) {
        &:first-of-type {
          padding-top: 0;
        }
      }
    }

    &__title {
      @include titleL;

      text-align: right;
      margin-bottom: 22px;

      @include breakpoint-down('deskL') {
        margin-bottom: 16px;
      }

      @include breakpoint-down('deskS') {
        text-align: center;
        margin-bottom: 8px;
      }
    }

    &__subtitle {
      text-align: right;

      @include breakpoint-down('deskS') {
        text-align: center;
      }

      > span {
        @include baseCTA;

        color: $redPrimary;
        cursor: pointer;
      }
    }
  }
</style>