<script setup lang="ts">
interface Props {
  components: Record<string, any>
}

const props = defineProps<Props>()

console.log('components:', props.components)
</script>

<template>
  <section class="relative h-[640px] lg:h-[1000px]">
    <WidgetsBackground
      v-if="props.components?.cardBackground"
      :component-data="props.components?.cardBackground"
      :group-sets="true"
    />
    <div
      class="relative h-full flex flex-col items-center justify-center gap-4"
    >
      <WidgetsSubTitle
        v-if="props.components.cardSubTitle"
        :component-data="props.components.cardSubTitle"
        :group-sets="true"
        class="text-[24px] font-[500] text-[#ffffff] leading-[34px]"
      />
      <WidgetsMainTitle
        v-if="props.components.cardMainTitle"
        :component-data="props.components.cardMainTitle"
        :group-sets="true"
        class="text-[50px] font-[700] text-[#c7a28b] leading-[70px]"
      />
      <WidgetsDescription
        v-if="props.components.cardDescription"
        :component-data="props.components.cardDescription"
        :group-sets="true"
        class="text-[20px] font-[500] text-white/70 leading-[30px]"
      />
      <WidgetsButtonList
        v-if="props.components.cardButtonList"
        :component-data="props.components.cardButtonList"
        :group-sets="true"
      />
    </div>
  </section>
</template>
