<template>
  <div class="service-packages-mobile">
    <Container class="container">
      <div class="title">Service Packages</div>
      <ul class="items">
        <ListItem
          v-for="(item, index) in items"
          :key="index"
          :button-link="buttonLink"
          :is-active="activeItemIndex === index"
          :item="item"
          @click="activeItemIndex = index">
        </ListItem>
      </ul>
    </Container>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import Container from '@/components/ui/Container.vue';
import ListItem from '@/components/sections/ServicePackages/ServicePackagesMobile/ListItem.vue';
import { IServicePackages } from '@/components/sections/ServicePackages/ServicePackages.types';

export default defineComponent({
  components: { ListItem, Container },

  props: {
    items: {
      type: Array as PropType<IServicePackages.Item[]>,
      required: true,
    },
    buttonLink: {
      type: String,
      default: '/pricing',
    },
  },

  data: () => ({
    activeItemIndex: 0,
  }),
});
</script>

<style lang="scss" scoped>
.service-packages-mobile {
  display: none;
}

.container {
  padding-top: 80px;
  padding-bottom: 80px;
}

.title {
  margin-bottom: 24px;

  color: #ffffff;
  font-weight: 700;
  font-size: 60px;
  line-height: 120%;
  text-transform: uppercase;
}
</style>
