<template>
  <div class="overflow-hidden" :class="{'rounded-br-3xl lg:rounded-br-[48px] rounded-tl-3xl lg:rounded-tl-[48px] bg-aqua-100': section?.has_background}">
    <div class="pb-container">
      <div class="rounded-3xl lg:rounded-[48px] pt-6 lg:pt-10 sm:pr-28 md:pr-0">
        <VHeaderPresenter :component="headerComponent" />
      </div>
    </div>
    <div class="pb-container" :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>