<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { provide, ref } from 'vue'
import type { AlertVariants } from '.'
import { cn } from '@/lib/utils'
import { alertVariants } from '.'

const props = defineProps<{
  class?: HTMLAttributes['class']
  variant?: AlertVariants['variant']
  collapsible?: boolean
  defaultCollapsed?: boolean
}>()

const isCollapsed = ref(props.defaultCollapsed ?? false)

const toggleCollapsed = () => {
  if (props.collapsible) {
    isCollapsed.value = !isCollapsed.value
  }
}

// Provide the collapsible state to child components
provide('alertCollapsed', isCollapsed)
provide('alertToggleCollapsed', toggleCollapsed)
provide('alertCollapsible', props.collapsible)
</script>

<template>
  <div
    data-slot="alert"
    :class="cn(alertVariants({ variant }), { 'cursor-pointer': props.collapsible }, props.class)"
    role="alert"
    @click="toggleCollapsed"
  >
    <slot />
  </div>
</template>
