<script setup lang="ts">
const { t } = useI18n()
const { canInstall, isInstalled, install } = usePWAInstall()
const installing = ref(false)

async function handleInstall() {
  installing.value = true
  try {
    const success = await install()
    if (success) {
      // 可以显示成功提示
      console.log('PWA 安装成功')
    }
  }
  finally {
    installing.value = false
  }
}
</script>

<template>
  <UButton
    v-if="canInstall && !isInstalled"
    :loading="installing"
    size="md"
    icon="i-heroicons-arrow-down-tray"
    @click="handleInstall"
  >
    {{ t('installPWA') }}
  </UButton>
  <UBadge
    v-else-if="isInstalled"
    size="md"
    color="primary"
    variant="subtle"
  >
    <div class="flex items-center gap-2">
      <UIcon name="i-heroicons-check-circle" class="w-5 h-5" />
      {{ t('installed') }}
    </div>
  </UBadge>
</template>
