<script setup lang="ts">
import { Alert as ShadcnAlert } from '@/components/core/alert';

import type { UiAlertProps } from './types';
import UiIcon from '../UiIcon/UiIcon.vue';
import { AlertVariantIconNames, AlertVariants } from './constants';
import { computed } from 'vue';

defineOptions({
  name: 'UiAlert',
});

const props = withDefaults(defineProps<UiAlertProps>(), {
  variant: 'default',
});

const alertVariantIcons = new Map(
  AlertVariants.map((variant) => [variant, AlertVariantIconNames[variant]]),
);

const alertIcon = computed(
  () => alertVariantIcons.get(props.variant) ?? AlertVariantIconNames.default,
);
</script>

<template>
  <ShadcnAlert :variant>
    <slot name="icon">
      <UiIcon :name="alertIcon" :size="16" />
    </slot>
    <slot />
  </ShadcnAlert>
</template>
