<script lang="ts" setup>
import VPFriendsGroup from '@theme/VPFriendsGroup.vue'
import VPFriendsItem from '@theme/VPFriendsItem.vue'
import VPLink from '@theme/VPLink.vue'
import { computed } from 'vue'
import { useData, useEditLink } from '../composables/index.js'

const editLink = useEditLink()
const { frontmatter: matter } = useData<'friends'>()

const list = computed(() => matter.value.list || [])
const groups = computed(() => matter.value.groups || [])
</script>

<template>
  <div class="vp-friends">
    <h2 class="title">
      {{ matter.title || 'My Friends' }}
    </h2>
    <p v-if="matter.description" class="description">
      {{ matter.description }}
    </p>
    <section v-if="list.length" class="friends-list">
      <VPFriendsItem
        v-for="(friend, index) in list"
        :key="friend.name + index"
        :friend="friend"
      />
    </section>

    <VPFriendsGroup v-for="(group, index) in groups" :key="index" :group="group" />

    <div v-if="editLink" class="edit-link">
      <VPLink
        class="edit-link-button"
        :href="editLink.link"
        :no-icon="true"
      >
        <span class="vpi-square-pen edit-link-icon" aria-label="edit icon" />
        {{ editLink.text }}
      </VPLink>
    </div>
  </div>
</template>

<style scoped>
.vp-friends {
  width: 100%;
  padding-top: calc(var(--vp-nav-height) + 32px);
  padding-bottom: 5rem;
  margin: 0 auto;
}

.vp-friends .title {
  padding: 32px 20px 0;
  margin-bottom: 2rem;
  font-size: 28px;
  font-weight: 700;
  color: var(--vp-c-text-1);
  text-align: center;
  outline: none;
  transition: color var(--vp-t-color);
}

.vp-friends .description {
  padding: 0 20px;
  margin-bottom: 16px;
  line-height: 28px;
  color: var(--vp-c-text-1);
  text-align: center;
  transition: color var(--vp-t-color);
}

.friends-list {
  display: grid;
  gap: 20px;
  padding: 0 20px;
  margin-top: 48px;
}

.edit-link {
  padding-left: 1rem;
  margin-top: 64px;
}

@media (min-width: 640px) {
  .vp-friends .title,
  .vp-friends .description {
    padding-left: 16px;
  }

  .friends-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 16px;
  }
}

@media (min-width: 960px) {
  .vp-friends {
    max-width: 784px;
    padding-top: 48px;
  }

  .vp-friends .title,
  .vp-friends .description,
  .edit-link {
    padding-left: 0;
  }

  .friends-list {
    padding: 0;
  }
}

@media (min-width: 1440px) {
  .vp-friends {
    max-width: 1104px;
  }

  .friends-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.edit-link-button {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 32px;
  color: var(--vp-c-brand-1);
  border: 0;
  transition: color var(--vp-t-color);
}

.edit-link-button:hover {
  color: var(--vp-c-brand-2);
}

.edit-link-icon {
  width: 14px;
  height: 14px;
  margin-right: 8px;
  fill: currentcolor;
}
</style>
