<template>
  <div class="w-full relative max-md:px-4">
    <div class="1xl:max-w-[1872px] mx-auto w-full sm:px-4 md:px-6 relative flex justify-center items-center"
         :class="{'py-8': isHorizontal, 'flex-col py-6': !isHorizontal}">
      <div v-for="(component, index) in section.components">
        <p v-if="component?.type === 'header' && component?.supporting_text"
           class="mr-[48px] text-base text-gray-600 font-medium"
           :class="{'mb-6': !isHorizontal}"
        >
          {{ component?.supporting_text }}
        </p>
        <div v-if="component?.type === 'logos'" class="flex flex-wrap justify-center" :class="{'gap-6': isHorizontal, 'gap-12': !isHorizontal}">
          <template v-for="logo in component.data">
            <a :href="logo?.url" title="Brand" target="_blank">
              <img v-if="logo?.logo" :src="logo?.logo" :class="getLogoHeight(component?.height)" alt="Brand Logo"/>
              <span v-else class="text-sm">No photo</span>
            </a>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";

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

const section = ref(props.section);
const isHorizontal = section.value.display === 'horizontal';

const getLogoHeight = (size) => {
  if (size === 'small') {
    return 'h-[32px]';
  }

  if (size === 'medium') {
    return 'h-[40px]';
  }

  return 'h-[32px]';
};
</script>