<template>
  <UPage>
    <NuxtLink v-if="to" :to="to">
      <UAlert :icon :title :color="color" :variant="variant" :description="to"
        class="mt-2 mb-3 text-black dark:text-white" :ui="{
          icon: iconSize
        }">
        <slot />
      </UAlert>
    </NuxtLink>
  </UPage>
</template>

<script setup lang="ts">

const {
  variant = 'subtle',
  title,
  icon = 'lucide:bookmark',
  color = 'primary',
} = defineProps<{
  color?: 'primary' | 'error' | 'secondary' | 'success' | 'info' | 'warning' | 'neutral';
  description?: string;
  title?: string;
  to?: string;
  icon?: string;
  iconSize?: string;
  variant?: 'subtle' | 'solid' | 'outline' | 'soft';
}>();

</script>
