<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { inject, type Ref, computed } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()

// Inject the collapsible state from parent Alert component
const isCollapsed = inject<Ref<boolean> | null>('alertCollapsed', null)
const isCollapsible = inject<boolean>('alertCollapsible', false)

const isExpandedState = computed(() => {
  return isCollapsed && !isCollapsed.value
})
</script>

<template>
  <div data-slot="alert-title" :class="cn('col-start-2 min-h-4', props.class)">
    <div class="flex items-center justify-between">
      <span><slot /></span>
      <i
        v-if="isCollapsible"
        :class="
          cn(
            'dku-icon-chevron-down-16 transition-transform duration-200 cursor-pointer',
            isExpandedState ? 'rotate-180' : ''
          )
        "
      ></i>
    </div>
  </div>
</template>
