<template>
  <div class="overflow-hidden" :class="{'rounded-br-[48px] rounded-tl-[48px] bg-aqua-100': section?.has_background}">
    <div class="max-w-[1640px] md:px-[120px] mx-auto w-full">
      <div class="max-md:mx-[30px] 1xl:mx-0 rounded-[48px] pt-[40px]">
        <VHeaderPresenter :component="headerComponent" />
      </div>
    </div>
    <div class="max-w-[1640px] md:px-[120px] mx-auto w-full" :class="{'mt-0': !section?.has_background, 'mt-6': section?.has_background}">
      <VCarousel :component="carouselComponent" :has-background="section?.has_background" />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import VHeaderPresenter from "@/components/presenters/components/HeaderPresenter.vue";
import VCarousel from "@/components/presenters/components/CarouselPresenter.vue";

const props = defineProps({
  section: {
    required: true,
    type: Object,
  },
});

const section = ref(props.section);
const headerComponent = computed(() => {
  return section.value.components.find((component) => component.type === "header");
});

const carouselComponent = computed(() => {
  return section.value.components.find((component) => component.type === "carousel");
});

</script>