<template>
  <section class="about-us-swiper">
    <ContentDesktop :items="items">
      <template v-if="$slots.headline" #headline>
        <slot name="headline"></slot>
      </template>
      <template #buttonText>
        <slot name="buttonText">Get started today</slot>
      </template>
    </ContentDesktop>
    <ContentMobile :items="items">
      <template v-if="$slots.headline" #headline>
        <slot name="headline"></slot>
      </template>
      <template #buttonText>
        <slot name="buttonText">Get started today</slot>
      </template>
    </ContentMobile>
  </section>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import ContentDesktop from './ContentDesktop.vue';
import ContentMobile from './ContentMobile.vue';
import { IAboutUsSwiper } from '@/components/sections/AboutUsSwiper/AboutUsSwiper.types';

export default defineComponent({
  components: { ContentMobile, ContentDesktop },

  props: {
    items: {
      type: Array as PropType<IAboutUsSwiper.Item[]>,
      required: true,
    },
  },
});
</script>

<style lang="scss" scoped>
.about-us-swiper {
  margin-bottom: 160px;
}
</style>
