<template>
  <div :class="$style.SectionLinkList">
    <div v-for="link in links" :key="link.title" :class="$style.SectionLinkListItem">
      <div :class="$style.SectionLinkListLink">
        <VPLink :href="link.link">{{ link.title }}</VPLink>
      </div>
      <div :class="$style.SectionLinkListDescription">
        {{ link.description }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue';
import { SectionLinkListProps } from './SectionLinkList.types'

defineProps<SectionLinkListProps>()

</script>

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

.SectionLinkList {
  $el: &;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: sizes.$size-spacing-x6 sizes.$size-spacing-x6;
  margin-top: sizes.$size-spacing-x10;

  &Item {
    display: flex;
    flex-direction: column;
    gap: sizes.$size-spacing-x2;
    // max-width: 315px;
  }

  &Link {

    a,
    a:hover,
    a:visited,
    a:active {
      color: themes.$color-text-link;
      text-decoration: none;
      @include mixin.subtitle3;
    }
  }

  &Description {
    color: themes.$color-text-inactive;
    @include mixin.body3;
  }
}
</style>