<template>
  <div class="lucid-glass-bar flex w-full flex-col rounded-4xl! border-1 border-white px-6 py-7">
    <div class="mb-[20px] border-b-1 border-dashed pb-4">
      <div class="mb-1 text-xl font-bold text-white">快捷工具</div>
      <div class="text-sm text-white/40">帮您快速解决用户的常见问题</div>
    </div>
    <div class="flex flex-col gap-2.5">
      <div
        v-for="tool in tools"
        :key="tool.label"
        class="flex h-[50px] w-full items-center justify-between rounded-[100px] bg-[#A9A9A9] px-4 text-black transition-colors"
      >
        <div class="flex flex-col leading-[1.2]">
          <span class="font-semibold">{{ tool.label }}</span>
          <span class="underline">{{ tool.url }}</span>
        </div>
        <CopyIcon class="size-5 cursor-pointer" @click="copy(tool.url)" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import CopyIcon from '../UserInfo/copy.svg?component'
import { toast } from 'vue-sonner'

const tools = [
  { label: 'iOS外区账号教程', url: 'http://getsapp.net/F6Lmev' },
  { label: 'app视频使用教程', url: 'hifastvpn.com/tutorialvids' },
  { label: '软件防丢名片', url: 'hifastvpn.com/alwaysfindus' },
  { label: '官方Telegram群', url: 't.me/hifastvpnofficial' },
]

function copy(text: string) {
  navigator.clipboard.writeText(text).then(() => {
    toast.success('已复制到剪贴板')
  })
}
</script>
