<script setup lang="ts">
import type { AriaLive } from '~/composables/aria'

const {
  ariaLive = 'polite',
  heading = 'h2',
  messageKey = (message: any) => message,
} = defineProps<{
  ariaLive?: AriaLive
  heading?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
  title: string
  messageKey?: (message: any) => any
}>()

const { announceLogs, appendLogs, clearLogs, logs } = useAriaLog()

defineExpose({
  announceLogs,
  appendLogs,
  clearLogs,
})
</script>

<template>
  <slot />
  <div sr-only role="log" :aria-live="ariaLive">
    <component :is="heading">
      {{ title }}
    </component>
    <ul>
      <li v-for="log in logs" :key="messageKey(log)">
        <slot name="log" :log="log">
          {{ log }}
        </slot>
      </li>
    </ul>
  </div>
</template>