<template>
  <div class="mx-auto grid grid-cols-2 gap-[10px] md:flex md:flex-wrap">
    <template v-for="(item, index) in downloadLinks" :key="index">
      <router-link
        v-if="item.isInternal"
        :to="item.link"
        :aria-label="item.label"
        class="lucid-glass-bar flex h-[40px] w-[140px] shrink-0 items-center space-x-2 rounded-full border border-white/20 transition-transform hover:brightness-110 active:scale-95 md:h-[50px] md:w-[180px]"
      >
        <div class="flex items-center justify-center">
          <component :is="item.icon" class="h-[40px] w-[140px] md:h-[50px] md:w-[180px]" />
        </div>
      </router-link>
      <a
        v-else
        :href="item.link"
        target="_blank"
        :aria-label="item.label"
        class="lucid-glass-bar flex h-[40px] w-[140px] shrink-0 items-center space-x-2 rounded-full transition-transform hover:brightness-110 active:scale-95 md:h-[50px] md:w-[180px]"
      >
        <div class="flex items-center justify-center">
          <component :is="item.icon" class="h-[40px] w-[140px] md:h-[50px] md:w-[180px]" />
        </div>
      </a>
    </template>
  </div>
</template>

<script setup lang="ts">
import Icon1 from './Group 105.svg?component'
import Icon2 from './Group 106.svg?component'
import Icon3 from './Group 107.svg?component'
import Icon4 from './Group 108.svg?component'
import { downLoadAndroid, downLoadWin, downLoadMac } from '@/utils/constant.ts'
// 定义下载链接数据
const downloadLinks = [
  { icon: Icon2, link: '/help', isInternal: true, label: '查看帮助中心' },
  { icon: Icon1, link: downLoadWin, label: '下载 Windows 版客户端' },
  { icon: Icon3, link: downLoadMac, label: '下载 macOS 版客户端' },
  { icon: Icon4, link: downLoadAndroid, label: '下载 Android 版客户端' },
]
</script>
