<template>
  <div class="data-types">
    <Container>
      <Entry />
      <div class="list">
        <ul class="items">
          <ListItem
            v-for="(item, index) in items"
            :key="index"
            :is-active="activeItemIndex === index"
            :item="item"
            @click="activeItemIndex = index">
            <template #content-bottom>
              <Info
                :points="items[activeItemIndex].points"
                class="info-mobile" />
            </template>
          </ListItem>
        </ul>
        <transition mode="out-in" name="slide-fade">
          <Info
            :key="activeItemIndex"
            :points="items[activeItemIndex].points"
            class="info-desktop" />
        </transition>
      </div>
    </Container>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { dataTypes } from '@/components/pages/lead-research/content';
import Info from './Info.vue';
import Entry from './Entry/Entry.vue';
import Container from '@/components/ui/Container.vue';
import ListItem from '@/components/pages/lead-research/DataTypes/ListItem.vue';

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

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

<style lang="scss" scoped>
.data-types {
  position: relative;

  margin-bottom: 160px;
}

.list {
  display: flex;
  align-items: center;
  justify-content: space-between;

  column-gap: 125px;
}

.items {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 484px;
  //height: 589px;
  min-height: 700px;
}

.info-desktop {
  position: sticky;
  top: 168px;
}

.info-mobile {
  display: none;
}
</style>
