TsBannerWithThreeSegments

<template>
  <div class="ts-banner p-4 relative w-full overflow-hidden bg-no-repeat bg-cover" :style="root_styles">
    <slot>
      <TsMedia
          append-class="items-stretch"
          :style="container_styles"
      >
        <TsMediaStart>
          <Blocks
              class="w-full h-full"
              :parent="props.builderBlock?.id"
              :path="`component.options.leftBlocks`"
              :blocks="props.leftBlocks"
          />
        </TsMediaStart>
        <TsMediaContent>
          <Blocks
              class="w-full h-full"
              :parent="props.builderBlock?.id"
              :path="`component.options.middleBlocks`"
              :blocks="props.middleBlocks"
          />
        </TsMediaContent>
        <TsMediaEnd>
          <Blocks
              class="w-full h-full"
              :parent="props.builderBlock?.id"
              :path="`component.options.rightBlocks`"
              :blocks="props.rightBlocks"
          />
        </TsMediaEnd>
      </TsMedia>
    </slot>
  </div>
</template>

<script setup lang="ts">
import { Blocks } from '@builder.io/sdk-vue';

type Props = {
  builderBlock?: object;
  leftBlocks?: object[] | object;
  middleBlocks?: object[] | object;
  rightBlocks?: object[] | object;
  background?: object;
}

const props = withDefaults(defineProps<Props>(), {
  background: () => ({
    image: {
      src: '/banners/desktop/banner-yellow-background.png'
    }
  })
});

const root_styles = computed(() => ({
  ...(props.background && (props.background.borderRadius || props.background.borderRadius === 0) &&  {borderRadius: `${props.background.borderRadius}px`}),
  ...((props.background && props.background.image && props.background.image.src) ?  {backgroundImage: `url(${props.background.image.src})`} : {backgroundImage: `url(/banners/desktop/banner-yellow-background.png)`}),
}))

const container_styles = computed(() => ({
  ...(props.background && props.background.overlay &&  {backgroundColor: props.background.overlay}),
}));

</script>