<template>
  <view class="collapse">
    <view class="collapse__header" @click="toggle">
      <text class="collapse__title">{{ title }}</text>
      <text class="collapse__arrow">{{ isExpanded ? '▼' : '▶' }}</text>
    </view>
    <view v-show="isExpanded" class="collapse__content">
      <slot></slot>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  title: { type: String, default: '' },
  expanded: { type: Boolean, default: false }
})

const emit = defineEmits(['toggle'])

const isExpanded = ref(props.expanded)

function toggle() {
  isExpanded.value = !isExpanded.value
  emit('toggle', isExpanded.value)
}
</script>

<style lang="scss" scoped>
.collapse {
  border-top: 1rpx solid $border-color;

  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16rpx;
    background-color: $bg-secondary;
    cursor: pointer;

    &:active {
      background-color: $bg-tertiary;
    }
  }

  &__title {
    color: $text-primary;
    font-size: 28rpx;
  }

  &__arrow {
    color: $text-secondary;
    font-size: 20rpx;
    transition: transform 0.2s;
  }

  &__content {
    padding: 16rpx;
    background-color: $bg-primary;
  }
}
</style>
