<template>
  <div class="background" :class="{ 'without-headline': !$slots.headline }">
    <Container>
      <h2 v-if="$slots.headline" class="headline">
        <slot name="headline"></slot>
      </h2>

      <div class="content">
        <Paragraph :paragraph="activeItem">
          <template #buttonText>
            <slot name="buttonText"></slot>
          </template>
        </Paragraph>
        <VButton
          class="next-button"
          icon-right="button-arrow"
          is-icon
          rounded
          type="basic"
          @click="nextItem" />
      </div>
    </Container>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { IAboutUsSwiper } from '@/components/sections/AboutUsSwiper/AboutUsSwiper.types';
import Paragraph from './Paragraph.vue';
import VButton from '@/components/ui/common/VButton.vue';
import Container from '@/components/ui/Container.vue';

export default defineComponent({
  components: { Container, VButton, Paragraph },

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

  data: () => ({
    activeItemIndex: 0,
  }),

  computed: {
    activeItem(): IAboutUsSwiper.Item {
      return this.items[this.activeItemIndex];
    },
  },

  methods: {
    nextItem() {
      const lastItem = this.items.length - 1;
      this.activeItemIndex =
        this.activeItemIndex < lastItem ? this.activeItemIndex + 1 : 0;
    },
  },
});
</script>

<style lang="scss" scoped>
.background {
  position: relative;

  padding-top: 52px;
  padding-bottom: 123px;
  overflow: hidden;

  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);

  &.without-headline {
    padding: 134px 0;
  }
}

.headline {
  max-width: 805px;
  margin-bottom: 92px;
  margin-left: 110px;

  color: #242628;
  font-weight: bold;
  font-size: 36px;
  line-height: 136%;
}

.content {
  position: relative;
  z-index: 2;

  margin-left: 110px;
}

.next-button {
  position: absolute;
  top: 50%;
  right: 15px;
  z-index: 3;

  background: #f2f4f5;
  box-shadow: none;
  transform: translateY(-50%);
}
</style>
