<script setup lang="ts">
import { getResourcesData, getResponsiveSrc } from '#layers/utils/dataUtil'
import type { PageDataComponent } from '#layers/types/api/pageData'

const props = defineProps<{
  componentData: PageDataComponent
  groupSets?: boolean
}>()

const resourcesData = computed(() => {
  return getResourcesData({
    resources: props.componentData?.resources,
    groupSets: props.groupSets,
  })
})

const displayText = resourcesData.value?.display?.txt
const imageSrc = getResponsiveSrc(resourcesData.value?.res_path)
</script>

<template>
  <BlocksVisualContent
    tag="p"
    :text="displayText"
    :image-src="imageSrc as any"
    image-class="w-full"
    :style="{
      color: '#000000',
    }"
  />
</template>
