<template>
  <section class="service-packages">
    <ServicePackagesDesktop :button-link="buttonLink" :items="items" />
    <ServicePackagesMobile :button-link="buttonLink" :items="items" />
  </section>
</template>

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

export default defineComponent({
  components: { ServicePackagesMobile, ServicePackagesDesktop },

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

<style lang="scss" scoped>
.service-packages {
  margin-bottom: 160px;
}
</style>
