<template>
  <div :class="wrapperClass">
    <slot>

    </slot>
  </div>
</template>

<script setup>
  import { computed, provide } from 'vue'
  import {useSize} from "@/composables/useInjections";
  import { getRoundedClass } from '@/util/class-util'
  import { expectedValues } from "@/util/prop-validators";
  import {CONTROL_SIZE} from "@/util/controls";

  const props = defineProps({
      modelValue: { type: String, default: '' },
      variant: { type: String, required: false, default: '' },
      size: { type: String, required: false, default: undefined },
      vertical: { type: Boolean, required: false, default: false },
      rounded: { type: [Boolean, String], required: false, default: false, validator: expectedValues(true, false, 'md', 'lg', 'full') },
  })

  const wrapperClass = computed(() => ['bttn-group', props.vertical ? 'vertical' : '', getRoundedClass(props.rounded)])

  const groupSize = useSize(props)

  provide( 'groupVariant', computed(() => props.variant) )
  provide( 'groupRounded', computed(() => props.rounded) )
  provide(CONTROL_SIZE, groupSize)

</script>

<script>
export default {
  name: "AisButtonGroup",
}
</script>
