<script setup lang="ts">
import AAlert from '#adata-ui/components/elements/alert/AAlert.vue'

const initState = () => ({
  size: 'sm',
  color: 'blue',
  iconType: 'circle'
})
const sizeOptions = [
  { value: 'sm', label: 'Small' },
  { value: 'lg', label: 'Large' }
]
const typeOptions = [
  { value: 'circle', label: 'Circle' },
  { value: 'triangle', label: 'Triangle' }
]
const colorOptions = [
  { value: 'blue', label: 'Blue' },
  { value: 'red', label: 'Red' },
  { value: 'orange', label: 'Orange' },
  { value: 'deepblue', label: 'Deepblue' },
  { value: 'green', label: 'Green' }
]
</script>

<template>
  <Story
    title="Elements/Alert"
    :layout="{
      type: 'grid',
      width: 300
    }"
  >
    <Variant title="AAlert" :init-state="initState">
      <template #default="{ state }">
        <div class="flex flex-col gap-3">
          <a-alert :size="state.size" :color="state.color">
            <template #default> Description text Description text Description text Description text Description text Descripon text</template>
          </a-alert>
          <a-alert :size="state.size" :color="state.color">
            <template #default> Description text Description textDescription textDescription textDescription text</template>
          </a-alert>
          <a-alert :size="state.size" :color="state.color">
            <template #default> Description text </template>
            <template #icon>
              <a-icon-warning-triangle :size="state.size" />
            </template>
          </a-alert>
          <a-alert :size="state.size" :color="state.color">
            <template #default> Description text </template>
            <template #icon>
              <a-icon-warning-circle :size="state.size" />
            </template>
          </a-alert>
        </div>
      </template>

      <template #controls="{ state }">
        <HstSelect v-model="state.size" title="Size" :options="sizeOptions" />
        <HstSelect v-model="state.color" title="Color" :options="colorOptions" />
        <HstSelect v-model="state.iconType" title="IconType" :options="typeOptions" />
      </template>
    </Variant>
  </Story>
</template>

<style scoped></style>
