<script setup>

const props = defineProps({
  queryStringData: {
    type: String
  },
  item: {
    type: Object,
    required: true
  },
  topLevelType: {
    type: String,
    required: true
  },
  platform: {
    type: String,
    required: true
  }
})

const dataStore = useDataStore()

const dataType = dataStore.dataTypes[props.topLevelType]
const historyType = computed(() => {
  const holder = dataType?.historyItemHolder
  if (!holder) return props.topLevelType

  const normalized = String(holder).toLowerCase()
  return normalized.endsWith("s") ? normalized : `${normalized}s`
})

</script>

<template>
  <UCard class="mt-5 scroll" :style="props.platform !== 'mobile' ? 'height: 80vh' : ''">
    <HistoryDisplay
        :type="historyType"
        v-if="props.item.id"
        :element-id="props.item.id"
        render-headline
    />
<!--TODO Workaround für die Höhe finden? Evt unterseite oder Modal oder ganz nach unten    -->
  </UCard>

</template>

<style scoped>

</style>
