<template>
  <div class="activity-list">
    <template v-for="instrument in instruments">
      <div
        class="activity__module"
        v-if="instrument[property].length"
        :key="instrument.id"
      >
        <h4 class="heading-4">{{ flavor.textInstrument }}: {{ instrument.title }}</h4>
        <activity-entry
          :to="`/${instrument.path}`"
          v-for="item in instrument[property]"
          :key="item.id"
          ><slot :item="item"></slot
        ></activity-entry>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { InstrumentActivityProperty } from '@/@types';
import { InstrumentNode } from '@/__generated__/graphql';
import ActivityEntry from '@/components/profile/ActivityEntry.vue';
import flavor from '@/helpers/app-flavor';

export interface Props {
  instruments: InstrumentNode[];
  property: InstrumentActivityProperty;
}
defineProps<Props>();
</script>
