<template>
  <UAlert
    :color="color"
    :variant="variant"
    :icon="icon"
    :title="title"
    :description="description"
    class="my-4 font-serif"
  >
    <template v-if="$slots.default" #description>
      <div class="prose prose-sm dark:prose-invert max-w-none font-serif">
        <slot />
      </div>
    </template>
  </UAlert>
</template>

<script setup lang="ts">
import { computed } from "vue";

type AlertColor =
  | "error"
  | "info"
  | "primary"
  | "secondary"
  | "success"
  | "warning"
  | "neutral";

interface Props {
  type?: "info" | "warning" | "error" | "success" | "primary";
  title?: string;
  description?: string;
  icon?: string;
  variant?: "solid" | "outline" | "soft" | "subtle";
}

const props = withDefaults(defineProps<Props>(), {
  type: "primary",
  variant: "soft",
});

// Map type to Nuxt UI 3 color
const color = computed<AlertColor>(() => {
  const colorMap: Record<string, AlertColor> = {
    info: "info",
    warning: "warning",
    error: "error",
    success: "success",
    primary: "primary",
  };
  return colorMap[props.type || "primary"] || "primary";
});
</script>
