<script setup>
const props = defineProps({
  /** 접힌 상태 제목 */
  title: {
    type: String,
    default: ''
  },
  /** 초기 펼침 여부 */
  defaultOpen: {
    type: Boolean,
    default: false
  },
  /** 본문 열림·닫힘 애니메이션 */
  animated: {
    type: Boolean,
    default: true
  }
})

const isOpen = ref(props.defaultOpen)

watch(() => props.defaultOpen, (value) => {
  isOpen.value = value
})

/**
 * 토글 펼침 상태를 전환한다.
 * @returns {void}
 */
const toggleOpen = () => {
  isOpen.value = !isOpen.value
}
</script>

<template>
  <div
    class="prose-toggle my-6 rounded-[10px] border border-[var(--site-line)] bg-[var(--site-panel)] p-5"
    :class="{ 'prose-toggle--open': isOpen }"
  >
    <div class="prose-toggle__header flex items-start gap-2">
      <button
        class="prose-toggle__trigger mt-0.5 inline-flex size-7 shrink-0 items-center justify-center rounded-md text-[var(--site-muted)] transition-colors hover:bg-black/5 hover:text-[var(--site-text)]"
        type="button"
        :aria-expanded="isOpen"
        aria-label="토글 펼치기·접기"
        @click="toggleOpen"
      >
        <svg
          class="prose-toggle__chevron size-4 transition-transform duration-300 ease-out"
          :class="{ 'prose-toggle__chevron--open': isOpen }"
          viewBox="0 0 16 16"
          fill="none"
          aria-hidden="true"
        >
          <path
            d="M6 4l4 4-4 4"
            stroke="currentColor"
            stroke-width="1.75"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </button>

      <div class="prose-toggle__title min-w-0 flex-1 text-[15px] font-semibold leading-7 text-[var(--site-text)]">
        <slot name="title">
          {{ title || '더 보기' }}
        </slot>
      </div>
    </div>

    <div
      class="prose-toggle__body-shell"
      :class="[
        animated ? 'prose-toggle__body-shell--animated' : '',
        isOpen ? 'prose-toggle__body-shell--open' : ''
      ]"
    >
      <div class="prose-toggle__body-inner min-h-0 overflow-hidden">
        <div
          class="prose-toggle__body mt-4 whitespace-pre-line text-[15px] leading-8 text-[var(--site-muted)]"
        >
          <slot />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.prose-toggle__chevron--open {
  transform: rotate(90deg);
}

.prose-toggle__body-shell--animated {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s ease;
}

.prose-toggle__body-shell--animated.prose-toggle__body-shell--open {
  grid-template-rows: 1fr;
}

.prose-toggle__body-shell:not(.prose-toggle__body-shell--animated) .prose-toggle__body-inner {
  display: none;
}

.prose-toggle__body-shell:not(.prose-toggle__body-shell--animated).prose-toggle__body-shell--open .prose-toggle__body-inner {
  display: block;
}
</style>
