<script setup lang="ts">
import type { PageDataResourceGroup } from '#layers/types/api/pageData'

const props = defineProps<{
  title: string
  resourcesData: PageDataResourceGroup
}>()

const { getCurrentSrc } = useResponsiveSrc()

const imageSrc = computed(() => {
  return getCurrentSrc(props.resourcesData)
})
</script>

<template>
  <div
    class="flex justify-center items-center w-full h-[120px] bg-center px-[20px] bg-no-repeat bg-cover sm:px-[40px] md:h-[180px]"
    :style="{ backgroundImage: `url(${imageSrc})` }"
  >
    <h2
      class="flex justify-center items-center w-full max-w-full md:justify-start md:max-w-[1300px]"
    >
      <span
        class="text-white text-[20px] font-bold tracking-[-0.6px] leading-[30px] md:text-[32px] md:leading-[44px] md:tracking-[-0.96px] line-clamp-2 text-center md:text-left"
      >
        {{ props.title }}
      </span>
    </h2>
  </div>
</template>
