<template>
  <div class="home-service-desk">
    <Title :color="$_theme('colorSecondary')" tag="h4" class="title">
      {{ fetchedData.title }}
    </Title>

    <div class="content-container">
      <div
        v-for="item in getCheckedData(fetchedData, ['bloc', 'data'])"
        :key="item.uuid"
        class="content"
      >
        <Title :color="$_theme('colorPrimary')" tag="h5" class="title">
          {{ item.title }}
        </Title>

        <div class="informations">
          <img :src="$_getContentImage(item.image)" />

          <Link v-if="item.link" :href="item.link" :icon="null">
            {{ item.bloc_content }}
          </Link>

          <BaseText v-else>
            {{ item.bloc_content }}
          </BaseText>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Link } from 'inside-collection/components'
import { Title, BaseText } from 'inside-collection/atoms'

export default {
  name: 'HomeServiceDesk',
  components: {
    Link,
    Title,
    BaseText
  },
  props: {
    fetchedData: {
      type: Object,
      required: true
    }
  }
}
</script>

<style lang="scss">
@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.home-service-desk {
  display: flex;
  align-items: center;
  padding: var(--spacing-l);
  background-color: var(--color-secondary-100);
  border-left: var(--spacing-s) solid var(--color-secondary);

  @include small-desktop {
    flex-direction: column;
  }

  @include tablet {
    max-width: 500px;
    align-items: flex-start;
    margin: 0 auto;
  }

  .title {
    flex-shrink: 0;
  }

  .content-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;

    @include tablet {
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
    }

    .content {
      position: relative;

      @include desktop-only {
        min-width: 216px;
        padding-left: var(--spacing-l);
        margin-left: var(--spacing-l);
      }

      &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        width: 1px;
        height: var(--spacing-xxl);
        background-color: var(--color-grey);
        transform: translateY(-50%);
      }

      @include desktop-to-tablet {
        &:first-child {
          padding-left: 0;
          margin-left: 0;

          &::after {
            content: none;
          }
        }
      }

      @include tablet {
        margin: var(--spacing-m) 0;

        &::after {
          content: none;
        }
      }

      & > div {
        display: flex;

        img {
          width: var(--spacing-m);
          margin-right: var(--spacing-s);
        }
      }

      .informations {
        margin-top: var(--spacing-xs);
      }
    }
  }
}
</style>
