<script setup lang="ts">
import AChipWrapper from "#adata-ui/components/elements/chip-wrapper/AChipWrapper.vue";
import type {Props} from './types'



const initState = (): Props => ({
  position: 'top-right',
  text: undefined,
  show: true,
  class: undefined,
  color: 'green',
  inset: false,
  size: 'sm',
})
const positionOptions = [
  { value: 'top-right', label: 'top-right' },
  { value: 'top-left', label: 'top-left' },
  { value: 'bottom-right', label: 'bottom-right' },
  { value: 'bottom-left', label: 'bottom-left' },
];
</script>

<template>
  <Story
    title="Elements/ChipWrapper"
    :layout="{
      type: 'grid',
      width: 285,
      height: 300,
    }"
  >
    <Variant
      title="AChipWrapper "
      :init-state="initState"
    >
      <template #default="{ state }">
        <div class="p-4">
          <a-chip-wrapper
            :position="state.position"
            :text="state.text"
            :show="state.show"
            :class="state.class"
            :color="state.color"
            :inset="state.inset"
            :size="state.size"
          >
            <div class="w-[32px] h-[32px] rounded-full bg-gray-900" />
          </a-chip-wrapper>
        </div>
      </template>

      <template #controls="{ state }">
        <HstSelect
          v-model="state.position"
          title="Color"
          :options="positionOptions"
        />
        <HstCheckbox
          v-model="state.inset"
          title="inset"
        />
      </template>
    </Variant>
  </Story>
</template>

<style scoped>

</style>
