<script setup lang='ts'>
import AStatusBadge from "./AStatusBadge.vue";
const initState = () => ({
  type: 'primary',
  view: 'default',
  size: 'sm',
})

const typeOptions = [
  { value: 'primary', label: 'Primary' },
  { value: 'success', label: 'Success' },
  { value: 'danger', label: 'Danger' },
  { value: 'gray', label: 'Gray' },
  { value: 'orange', label: 'Orange' },
  { value: 'warning', label: 'Warning' }
]

const sizeOptions = [
  { value: 'sm', label: 'Small' },
  { value: 'lg', label: 'Large' }
]

const viewOptions = [{ value: 'default', label: 'Default' }, {value: 'inverted', label: 'Inverted'},{value: 'transparent', label: 'Transparent'}]

</script>

<template>
  <Story
    title="Elements/Badge/StatusBadge"
    :layout="{
      type: 'grid',
      width: 200,
    }"
  >
    <Variant
      title="StatusBadge"
      :init-state="initState"
    >
      <template #default="{state}">
        <a-status-badge
          :type="state.type"
          :view="state.view"
          :size="state.size"
        >
          Status badge
        </a-status-badge>
      </template>

      <template #controls="{ state }">
        <HstSelect
          v-model="state.type"
          title="Type"
          :options="typeOptions"
        />
        <HstSelect
          v-model="state.size"
          title="Size"
          :options="sizeOptions"
        />
        <HstSelect
          v-model="state.view"
          title="View"
          :options="viewOptions"
        />
      </template>
    </Variant>
  </Story>
</template>

<style scoped>

</style>
