<template>
  <div class="package-info">
    <div class="services-included">
      <h3 class="title">Services include</h3>
      <InfoList :items="package.servicesIncluded" />
    </div>
    <div class="outcomes">
      <h3 class="title">Outcomes</h3>
      <InfoList :items="package.outcomes" />
    </div>
    <CampaignDuration :value="package.campaignDuration" />
    <VButton
      class="mobile-button"
      justify="space-between"
      size="extra-big"
      icon-right="button-arrow"
      :to="buttonLink">
      See more
    </VButton>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { IServicePackages } from '../ServicePackages.types';
import InfoList from '@/components/sections/ServicePackages/Info/InfoList.vue';
import CampaignDuration from '@/components/sections/ServicePackages/Info/CampaignDuration.vue';
import VButton from '@/components/ui/common/VButton.vue';

export default defineComponent({
  components: { VButton, InfoList, CampaignDuration },

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

<style lang="scss" scoped>
.package-info {
  display: grid;
  flex: 1;
  grid-template-columns: auto auto;

  gap: 48px;
  align-content: space-around;
  justify-content: space-between;

  padding: 56px 48px;

  background: linear-gradient(
    0deg,
    rgba(100, 102, 104, 0.05),
    rgba(100, 102, 104, 0.05)
  );
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
}

h3.title {
  margin-bottom: 24px;

  color: #f2f4f5;
  font-weight: 700;
  font-size: 18px;
  line-height: 144%;
}

.services-included,
.outcomes {
  margin-bottom: 32px;
}

.services-included {
  grid-row: 1 / span 2;
}

.outcomes {
}

.mobile-button {
  display: none !important;
}
</style>
