<template>
  <div :class="$style.CustomHomeServices">
    <h2 id="home-services-section-title" :class="$style.CustomHomeServicesTitle">Документация по сервисам</h2>

    <div v-if="Array.isArray(frontmatter.services)" :class="$style.CustomHomeServicesList">
      <CustomHomeServiceCard v-for="service in frontmatter.services" :key="service.title" :title="service.title"
        :articles="service.articles" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useData } from 'vitepress';
import CustomHomeServiceCard from './CustomHomeServiceCard.vue';

const { frontmatter } = useData()
</script>

<style lang="scss" module>
@use "@beeline/design-tokens/scss/tokens/globals/sizes";
@use "@beeline/design-tokens/scss/tokens/themes";
@use "@beeline/design-tokens/scss/mixin";

.CustomHomeServices {
  max-width: 1080px;
  margin: 0 auto;

  &Title {
    @include mixin.h2;
    text-align: center;
    margin-bottom: 40px;
    color: themes.$color-text-active;
  }

  &List {
    display: flex;
    flex-direction: column;
    gap: sizes.$size-spacing-x6;
  }
}
</style>