<script setup lang="ts">
import { RichSelect } from '@flavorly/vanilla-components'
import { ref } from 'vue'
const value = ref('Option 1')

const options = [
  { value: 'Option 1', text: 'One Option' },
  { value: 'Option 2', text: 'Two Options' },
  { value: [{ anotherObject: true, nested: 'deep' }], text: 'Complex Object' },
  {
    value: 'seprator',
    text: 'A sperator can be usefull',
    children: [
      { value: 'Option 4', text: '4th Option' },
      { value: 'Option 5', text: '5th Option' }
    ]
  }
]
</script>

<template>
  <div class="container bg-red-300 m-auto p-5">
    <div class="w-full">
      <RichSelect
        v-model="value"
        name="test"
        :options="options"
        :clearable="true"
        placeholder="Please select an option"
      />
    </div>
  </div>
</template>
