<script setup lang="ts">
import * as DE from '~/components/pub/my-ui/doc-entry'
import type { McuSrcCategory } from '~/models/mcu-src-category';

const model = defineModel()
const props = defineProps<{
  data: McuSrcCategory[]
}>()
const emit = defineEmits<{
  pick: [category: McuSrcCategory]
}>()

if (!model.value && props.data.length > 0) {
  model.value = props.data[0]?.code
}

function pick(category: McuSrcCategory) {
  model.value = category.code
  emit('pick', category)
}

</script>

<template>
  <div class="mb-5">
    <div class="font-semibold mb-1.5">
      Kategori
    </div>
    <div class="-mx-1 [&_button]:mx-1 ">
      <Button v-for="item, idx in data" :variant="model === item.code ? 'default' : 'outline'" @click="pick(item)">
        {{ item.name }}
      </Button>
    </div>
  </div>
</template>
