<template>
  <div
    role="alert"
    class="alert tw-border-2 tw-border-solid tw-p-3 tw-rounded tw-text-sm"
    :class="{
      'tw-border-amber-200 tw-bg-amber-50 tw-text-amber-950': isWarning,
      'tw-border-rose-200 tw-bg-rose-50 tw-text-rose-950': isError,
    }"
  >
    <p class="tw-font-semibold tw-mb-1">{{ title }}</p>
    <p class="tw-mb-0">
      <slot />
    </p>
  </div>
</template>

<script lang="ts" setup>
defineProps<{
  title: string
  isWarning?: boolean
  isError?: boolean
}>()
</script>

<style lang="postcss" scoped>
.alert:deep(strong) {
  white-space: nowrap;
}
</style>