<script setup lang="ts">
import AChips from './AChips.vue'

const initState = () => ({
  disabled: false,
  state: 'primary',
  view: 'standard',
  size: 'sm',
  form: 'button',
  loading: false
})

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

const viewOptions = [
  { value: 'standard', label: 'Standard' },
  {
    value: 'outline',
    label: 'Outline'
  }
]
</script>

<template>
  <Story
    title="Elements/Chip"
    :layout="{
      type: 'grid',
      width: 200
    }"
  >
    <Variant title="AChip" :init-state="initState">
      <template #default="{ state }">
        <div class="flex items-center p-5">
          <a-chips :disabled="state.disabled" :view="state.view" :size="state.size">
            Chip Text
          </a-chips>
        </div>
      </template>

      <template #controls="{ state }">
        <HstCheckbox v-model="state.disabled" title="Disabled" />
        <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>
