<script lang="ts" setup>
import { ref } from 'vue'

interface FaqItem {
  question: string
  answer: string
}

interface Props {
  items: FaqItem[]
}

defineProps<Props>()

const open = ref<number | null>(null)

function toggle(idx: number): void {
  open.value = open.value === idx ? null : idx
}
</script>

<template>
  <div class="faq">
    <div
      v-for="(item, idx) in items"
      :key="idx"
      class="faq__item"
      :class="{ 'faq__item--open': open === idx }"
    >
      <button
        type="button"
        class="faq__question"
        :aria-expanded="open === idx"
        @click="toggle(idx)"
      >
        <span class="faq__question-text">{{ item.question }}</span>
        <VIcon
          :icon="open === idx ? 'tabler-minus' : 'tabler-plus'"
          size="20"
          class="faq__icon"
        />
      </button>
      <VExpandTransition>
        <div v-show="open === idx" class="faq__answer">
          <div class="faq__answer-text" v-html="item.answer" />
        </div>
      </VExpandTransition>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.faq {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 820px;
  margin: 0 auto;
}

.faq__item {
  border-radius: 14px;
  background: rgba(var(--v-theme-surface), 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
  transition: border-color 0.15s ease;

  &:hover {
    border-color: rgba(var(--v-theme-on-surface), 0.14);
  }
}

.faq__item--open {
  border-color: rgba(var(--v-theme-primary), 0.4);
}

.faq__question {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: rgba(var(--v-theme-on-surface), 0.95);
  font-size: 15px;
  font-weight: 600;
}

.faq__question-text {
  flex-grow: 1;
}

.faq__icon {
  color: rgb(var(--v-theme-primary));
  flex-shrink: 0;
}

.faq__answer {
  padding: 0 22px 18px;
}

.faq__answer-text {
  color: rgba(var(--v-theme-on-surface), 0.7);
  font-size: 14px;
  line-height: 1.6;

  :deep(a) {
    color: rgb(var(--v-theme-primary));
    text-decoration: none;
    border-bottom: 1px dotted rgba(var(--v-theme-primary), 0.5);

    &:hover {
      border-bottom-style: solid;
    }
  }

  :deep(strong) {
    color: rgba(var(--v-theme-on-surface), 0.92);
    font-weight: 600;
  }
}
</style>
