<template>
  <div class="mx-auto grid grid-cols-2 gap-4 md:flex md:flex-wrap">
    <template v-for="(item, index) in downloadLinks" :key="index">
      <router-link
        v-if="item.isInternal"
        :to="item.link"
        class="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]"
        style="
          backdrop-filter: blur(36px);
          box-shadow:
            0px 0px 33px 0px #f2f2f280 inset,
            -1px -1.5px 1.5px -3px #b3b3b3 inset,
            3px 4.5px 1.5px -3px #b3b3b333 inset,
            4.5px 4.5px 1.5px -5.25px #ffffff80 inset,
            -4.5px -4.5px 1.5px -5.25px #ffffff80 inset;
          border-image-source: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.4) 0%,
            rgba(255, 255, 255, 0) 30%
          );
          border-image-slice: 1;
        "
      >
        <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"
        class="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]"
        style="
          backdrop-filter: blur(36px);
          box-shadow:
            0px 0px 33px 0px #f2f2f280 inset,
            -1px -1.5px 1.5px -3px #b3b3b3 inset,
            3px 4.5px 1.5px -3px #b3b3b333 inset,
            4.5px 4.5px 1.5px -5.25px #ffffff80 inset,
            -4.5px -4.5px 1.5px -5.25px #ffffff80 inset;
          border-image-source: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.4) 0%,
            rgba(255, 255, 255, 0) 30%
          );
          border-image-slice: 1;
        "
      >
        <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 },
  { icon: Icon1, link: downLoadWin },
  { icon: Icon3, link: downLoadMac },
  { icon: Icon4, link: downLoadAndroid },
]
</script>
