TsBannerWithTwoSegmentsMobile

<template>
  <div class="ts-banner p-4 relative overflow-hidden bg-no-repeat bg-cover" :style="root_styles">
    <slot>
      <TsMedia
          :style="container_styles"
      >
        <TsMediaStart>
          <NuxtImg
              class="max-w-full h-auto"
              v-if="props.foreground && props.foreground.image && props.foreground.image.src"
              :src="props.foreground.image.src"
              :alt="props.foreground && props.foreground.image && props.foreground.image.alt ? props.foreground.image.alt : ''"
              width="150"
              height="179"
          />
        </TsMediaStart>
        <TsMediaContent>
          <Blocks
              class="w-full"
              :parent="props.builderBlock?.id"
              :path="`component.options.content`"
              :blocks="props.content"
          />
        </TsMediaContent>
      </TsMedia>
    </slot>
  </div>
</template>

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

type Props = {
  builderBlock?: object;
  content?: object[] | object;
  background?: object;
  foreground?: object;
}

const props = withDefaults(defineProps<Props>(), {
  background: () => ({
    image: {
      src: '/banners/mobile/banner-yellow-background.png'
    }
  }),
  foreground: () => ({
    image: {
      src: '/banners/foreground/mobile-banner-foreground-image.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/mobile/banner-yellow-background.png)`}),
}))

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

</script>