<template>
  <div class="question-list">
    <el-collapse class="question-collapse" accordion>
      <el-collapse-item
        v-for="(question, index) in questions"
        :key="index"
        :title="question.title"
        :name="String(index)"
      >
        <markdown-renderer :content="question.content || ''" />
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup lang="ts">
defineProps({
  questions: {
    type: Array as () => Array<{ title: string; content: string }>,
    default: () => [],
  },
});
</script>

<style scoped>
.question-list {
  width: 100%;
}

.question-collapse {
  border: none;
}

.question-collapse :deep(.el-collapse-item) {
  margin-bottom: 1rem;
  border-radius: 8px;
}

.question-collapse :deep(.el-collapse-item__header) {
  font-size: 1rem;
  padding: 1rem;
  border-radius: 8px;
  background-color: #f5f7fa;

  transition: all 0.3s ease;

  &.is-active {
    background-color: #e1e6eb;
    color: var(--el-color-primary);
  }
}

.question-collapse :deep(.el-collapse-item__wrap) {
  border: none;
}

.question-collapse :deep(.el-collapse-item__content) {
  padding: 1rem;
  font-size: 0.9rem;
}
</style>
