<script setup lang="ts">
import theme from '#build/ui/alert'

const variants = Object.keys(theme.variants.variant)

const actions = [{
  label: 'Action',
  click() {
    console.log('Action clicked')
  }
}]

const data = {
  title: 'Heads up!',
  description: 'You can add components to your app using the cli.',
  icon: 'i-heroicons-command-line',
  actions,
  close: true
}
</script>

<template>
  <div class="flex flex-col gap-2 flex-1">
    <UAlert :title="data.title" />
    <UAlert :title="data.title" :icon="data.icon" />
    <UAlert :title="data.title" :icon="data.icon" :close="data.close" />
    <UAlert :title="data.title" :icon="data.icon" :close="data.close" :actions="data.actions" />
    <UAlert :title="data.title" :icon="data.icon" :close="data.close" :description="data.description" />
    <UAlert :title="data.title" :avatar="{ src: 'https://avatars.githubusercontent.com/u/739984?v=4' }" :close="data.close" :description="data.description" />
    <UAlert v-bind="data" color="white" />
    <UAlert v-bind="data" color="gray" />
    <UAlert v-bind="data" color="black" />
    <UAlert v-for="variant in variants" :key="variant" v-bind="data" color="primary" :variant="(variant as any)" />
  </div>
</template>
