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

import { Button } from '@/components/ui/button'
import { TooltipWrapper } from '@/components/ui/tooltip'
import { useCopyToClipboard } from '@/composables/useCopyToClipboard'

const props = withDefaults(
  defineProps<{
    title: string
    defaultExpanded?: boolean
    data?: unknown
  }>(),
  {
    defaultExpanded: true,
    data: undefined,
  },
)

const isExpanded = ref(props.defaultExpanded)
const { copy } = useCopyToClipboard()

function copyData() {
  if (props.data !== undefined) {
    copy(JSON.stringify(props.data, null, 2))
  }
}
</script>

<template>
  <div class="flex flex-col">
    <!-- Header with collapse toggle -->
    <div class="flex items-center justify-between bg-accent pl-4 pr-2.5 py-2 dark:bg-accent/10">
      <div class="flex items-center gap-1">
        <span class="font-medium">{{ title }}</span>
        <Button variant="ghost" size="icon-xs" @click="isExpanded = !isExpanded">
          <i
            class="dku-icon-chevron-right-16 transition-transform duration-200"
            :class="{ 'rotate-90': isExpanded }"
          />
        </Button>
      </div>

      <TooltipWrapper v-if="data !== undefined" content="Copy section data" side="left">
        <Button variant="ghost" size="icon-xs" @click="copyData">
          <i key="copy" class="dku-icon-copy-16" />
        </Button>
      </TooltipWrapper>
    </div>

    <!-- Collapsible content -->
    <div v-if="isExpanded">
      <slot />
    </div>
  </div>
</template>
