<template>
  <div :class="getModifiersClass('c-alert', modifiers)" aria-hidden="false" role="alert">
    <span class="c-alert__icon" :class="icon ? `icon-${icon}` : ''">
    </span>
    <span class="c-alert__text">
      <slot />
    </span>
    <span @click.prevent="$emit('close')" class="js-close-alert c-alert__close"></span>
  </div>
</template>

<script setup lang="ts">
import type { ModifierItems, Icons } from './alert.config';
import type Alert from './alert';
import useComponentModifiers from '../../composable/useComponentModifiers';
import { onUnmounted } from 'vue';

const props = defineProps<{
  icon?: Icons;
  modifiers?: ModifierItems;
  disableScript?: boolean;
}>();

if (!props.disableScript && typeof document !== 'undefined') {
  let instance: Alert | null;

  import('./alert').then(({ default: Alert }) =>
    instance = new Alert(document))

  onUnmounted(() => {
    instance?.destroy();
    instance = null;
  })
}

const { getModifiersClass } = useComponentModifiers();

</script>
