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

const props = defineProps<Props>()
</script>

<template>
  <section class="relative h-[640px] md:h-[1000px]">
    <WidgetsBackground
      v-if="props.components?.background"
      :resources-data="props.components?.background.groups[0]"
      :gradient="true"
    />
    <div
      class="relative h-full flex flex-col items-center justify-center gap-4 md:gap-5"
    >
      <WidgetsMainTitle
        v-if="props.components.mainTitle && props.components.mainTitle.groups"
        :resources-data="props.components.mainTitle.groups[0]"
        class="w-[355px] md:w-[944px]"
      />
      <WidgetsDescription
        v-if="
          props.components.description && props.components.description.groups
        "
        :resources-data="props.components.description.groups[0]"
        class="w-[355px] md:w-[944px]"
      />
      <WidgetsVideoPlay
        v-if="props.components.videoPlay && props.components.videoPlay.groups"
        :resources-data="props.components.videoPlay.groups[0]"
      />
      <WidgetsButtonList
        v-if="props.components.buttonList && props.components.buttonList.groups"
        :groups-data="props.components.buttonList.groups"
        class="mt-[48px] md:mt-[72px]"
      />
    </div>
  </section>
</template>
