<template>
  <option :value="category.id">
    {{ "-".repeat(level) }} {{ category.name }}
  </option>

  <SelectOption
      v-if="category.children"
      v-for="child in category.children"
      :key="child.id"
      :category="child"
      :level="level + 1"
  />
</template>

<script setup>
const props = defineProps({
  category: {
    type: Object,
    required: true,
  },

  level: {
    type: Number,
    default: 0,
  }
})
</script>

<style scoped lang="scss">

</style>