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

const productcategories = ref([])

const setup = async () => {
  productcategories.value = await useEntities("productcategories").select()
}

setup()

const renderedCategories = computed(() => {
  if (!Array.isArray(props.row?.productcategories)) return ""

  return props.row.productcategories
    .map((id) => productcategories.value.find((x) => x.id === id)?.name)
    .filter(Boolean)
    .join(", ")
})
</script>

<template>
  <span v-if="renderedCategories">{{ renderedCategories }}</span>
</template>
