<template>
  <el-checkbox-group class="custom-checkbox">
    <template v-for="option in props.options" :key="option.key || option.value">
      <component :is="props.type === 'button' ? ElCheckboxButton : ElCheckbox" v-bind="option">
        <template v-if="option?.slotLabel" #default>{{ option?.slotLabel }}</template>
      </component>
    </template>
  </el-checkbox-group>
</template>

<script setup lang="ts" name="EpCheckBox">
import { ElCheckboxGroup, ElCheckbox, ElCheckboxButton } from 'element-plus'
import type { FormItemCheckBoxCustomProp } from 'global-type'

interface CheckboxProp {
  type?: 'checkbox' | 'button'
  options: FormItemCheckBoxCustomProp['options']
}

const props = defineProps<CheckboxProp>()
</script>

<style scoped lang="scss">
.custom-checkbox {
}
</style>
