<script>
import { computed, defineComponent } from "vue";
import { useComponentColor, useComponentSize } from "@inkline/inkline/composables";
import IButtonGroup from "@inkline/inkline/components/IButtonGroup/IButtonGroup.vue";
const componentName = "ICheckableButtonGroup";
export default defineComponent({
  name: componentName,
  components: { IButtonGroup },
  inheritAttrs: false,
  props: {
    /**
     * The color variant of the checkable buttons
     * @type light | dark
     * @default
     * @name color
     */
    color: {
      type: String,
      default: void 0
    },
    /**
     * The size variant of the checkable buttons
     * @type sm | md | lg
     * @default
     * @name size
     */
    size: {
      type: String,
      default: void 0
    },
    /**
     * The type of the checkable buttons
     * @type sm | md | lg
     * @default
     * @name size
     */
    type: {
      type: String,
      required: true
    },
    /**
     * The style variant of the checkable buttons
     * @type default | group
     * @default default
     * @name variant
     */
    variant: {
      type: String,
      default: "default"
    }
  },
  setup(props) {
    const currentColor = computed(() => props.color);
    const currentSize = computed(() => props.size);
    const { color } = useComponentColor({ componentName, currentColor });
    const { size } = useComponentSize({ componentName, currentSize });
    const classes = computed(() => ({
      "checkable-button-group": true,
      [`-${color.value}`]: true,
      [`-${size.value}`]: true,
      [`-${props.type}`]: true,
      [`-${props.variant}`]: true
    }));
    return {
      classes
    };
  }
});
</script>

<template>
    <IButtonGroup v-if="variant === 'group'" :class="classes" v-bind="$attrs">
        <slot />
    </IButtonGroup>
    <div v-else :class="classes" v-bind="$attrs">
        <!-- @slot default Slot for default content -->
        <slot />
    </div>
</template>
