<script setup>
// Define props with validation
const props = defineProps({
  path: {
    type: String,
    required: true,
  },
  name: {
    type: Object,
    required: true,
    validator: (value) => {
      // Basic validation to ensure data has a name property
      return value && value.name
    },
  },
})
</script>

<template>
  <StaticElement name="parsed-name" size="m">
    <div v-show="name" class="d-flex flex-row">
      <span> {{ index }}</span>
      <v-chip
        v-for="(prefix, index) in name.value[path].prefix"
        :key="`prefix-${index}`"
        size="x-small"
        class="mr-1 bg-indigo-lighten-3"
        >{{ prefix }}</v-chip
      >
      <v-chip
        v-for="(given, index) in name.value[path].given"
        :key="`given-${index}`"
        size="x-small"
        class="mr-1 bg-blue-darken-3"
        >{{ given }}</v-chip
      >
      <v-chip
        v-show="name.value[path].family"
        size="x-small"
        class="mr-1 bg-blue"
        >{{ name.family }}</v-chip
      >
      <v-chip
        v-for="(suffix, index) in name.value[path].suffix"
        :key="`suffix-${index}`"
        size="x-small"
        class="mr-1 bg-indigo-lighten-3"
        >{{ suffix }}</v-chip
      >
    </div>
  </StaticElement>
</template>
