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

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

const { getCurrentSrc } = useResponsiveSrc()

const resPath = computed(() => props.resourcesData?.res_path)
const imageSrc = computed(() => {
  return getCurrentSrc(resPath.value)
})
</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="flex justify-center items-center text-white text-[20px] font-bold tracking-[-0.6px] leading-[30px] md:text-[32px] md:leading-[44px] md:tracking-[-0.96px]"
      >
        {{ props.title }}
      </span>
    </h2>
  </div>
</template>
