<template>
  <li class="item" :class="{ active: isActive }" @click="$emit('open')">
    <div class="heading">
      <img v-lazy="arrowIcon" width="21" height="21" class="arrow" />
      <div class="title">{{ item.name }}</div>
      <img v-lazy="dropdownIcon" width="6" height="10" class="dropdown-icon" />
    </div>
    <div v-show="isActive" class="content">
      <Info :button-link="buttonLink" :package="item" />
    </div>
  </li>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { IServicePackages } from '@/components/sections/ServicePackages/ServicePackages.types';
import Info from '@/components/sections/ServicePackages/Info/Info.vue';
import arrowIcon from '@/assets/img/static-icons/arrow/arrow-right-long-orange.svg?url';
import dropdownIcon from '@/assets/img/static-icons/arrow/arrow-right-white.svg?url';

export default defineComponent({
  components: { Info },

  props: {
    item: {
      type: Object as PropType<IServicePackages.Item>,
      required: true,
    },
    isActive: Boolean,
    buttonLink: {
      type: String,
      default: '/pricing',
    },
  },

  emits: ['open'],

  data: () => ({
    arrowIcon,
    dropdownIcon,
  }),
});
</script>

<style lang="scss" scoped>
.item {
  display: flex;
  flex-direction: column;

  border-bottom: 1px solid #3c3d3e;
}

.heading {
  position: relative;

  display: flex;
  align-items: center;
  padding: 58px 23px 48px 16px;

  font-weight: bold;
  font-size: 26px;
  line-height: 136%;
  column-gap: 5px;

  cursor: pointer;

  .active & {
    cursor: initial;
  }

  .arrow {
    position: absolute;
    left: 40px;

    opacity: 0;

    transition: opacity 0.4s ease-out;

    .active & {
      opacity: 1;
    }
  }

  .title {
    color: #f2f4f5;
    font-size: 24px;
    line-height: 132%;

    transition: all 0.4s ease-out;

    .active & {
      transform: translateX(80px);
    }
  }

  .dropdown-icon {
    margin-left: auto;

    transform: rotate(90deg);

    transition: transform 0.4s ease-out;

    fill: #7d7f82;

    .active & {
      transform: rotate(270deg);
    }
  }
}

.content {
  width: 100%;
  padding-bottom: 48px;

  overflow: hidden;

  animation: openContent 0.8s ease-in-out;

  .description {
    max-width: 396px;

    color: #7d7f82;
    font-size: 16px;
    line-height: 180%;
  }
}

@keyframes openContent {
  from {
    max-height: 1px;
  }
  to {
    max-height: 800px;
  }
}
</style>
