<script setup lang="ts">
withDefaults(
  defineProps<{
    variant?: "info" | "success" | "warning" | "error";
    title?: string;
    live?: boolean;
  }>(),
  { variant: "info", title: undefined, live: false },
);
</script>

<template>
  <div
    class="ds-alert"
    :class="`ds-alert--${variant}`"
    :role="live ? (variant === 'error' ? 'alert' : 'status') : undefined"
  >
    <span aria-hidden="true">●</span>
    <div>
      <h3 v-if="title" class="ds-alert__title">{{ title }}</h3>
      <div class="ds-alert__body"><slot /></div>
    </div>
  </div>
</template>
