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

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

<template>
  <div v-if="Array.isArray(frontmatter.features)" :class="$style.HomeFeatures">
    <CustomHomeFeature v-for="feature in frontmatter.features" :key="feature.title" :title="feature.title"
      :icon="feature.icon" :link="feature.link" :scrollTo="feature.scroll_to" :disabled="feature.disabled" :items="feature.items" />
  </div>
</template>

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

.HomeFeatures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: sizes.$size-spacing-x8 sizes.$size-spacing-x6;
  max-width: 1080px;
  margin: 0 auto;
  margin-bottom: 80px;

  @media (max-width: 1080px) {
    padding-left: 24px;
    padding-right: 24px;
  }

  @media (max-width: 959px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (max-width: 639px) {
    grid-template-columns: 1fr;
    gap: sizes.$size-spacing-x6;
    margin-bottom: 48px;
  }
}
</style>