<script setup>
import AisFieldset from '@/components/fieldset/AisFieldset.vue'
import AisField from '@/components/field/AisField.vue'
import AisInput from '@/components/input/AisInput.vue'
import AisSelect from '@/components/select/AisSelect.vue'
import AisCheckbox from '@/components/checkbox/AisCheckbox.vue'
import { ref } from 'vue'

const data = ref({
  field1: 'Hello',
  field2: 'World',
  field3: 'Field #3',
})

const sizes = ['sm', 'md', 'lg']
const selectedSize = ref('md')
const disabledStates = [
  { value: false, label: 'false'},
  { value: true, label: 'true'},
]
const isDisabled = ref(false)
</script>

<template>
  <div class="grid gap-8">
    <AisFieldset
        size="sm"
        legend="Fieldset Props"
        class="flex gap-8 px-4 pt-2 pb-4 border"
    >
      <AisField label="Size">
        <AisSelect v-model="selectedSize" :options="sizes" size="sm" class="w-20" />
      </AisField>

      <AisField label="Disabled" label-mode="transparent">
        <AisCheckbox v-model="isDisabled" size="sm" class="">Disabled</AisCheckbox>
      </AisField>
    </AisFieldset>

    <AisFieldset
        class="grid gap-4 pt-2"
        legend="Example Fieldset"
        :size="selectedSize"
        :disabled="isDisabled"
    >
      <AisField label="Field 1">
        <AisInput v-model="data.field1"/>
      </AisField>
      <AisField label="Field 2">
        <AisInput v-model="data.field2"/>
      </AisField>

      <AisInput v-model="data.field3" />
    </AisFieldset>
  </div>
</template>

