<script setup>
import { ref } from 'vue'
import { useInstallPrompt } from '../composables/useInstallPrompt.js'

const { canInstall, install } = useInstallPrompt()
const dismissed = ref(false)
</script>

<template>
  <Teleport v-if="canInstall && !dismissed" to="#actionbar-actions" defer>
    <button
      class="install-btn"
      data-testid="install-prompt-btn"
      :aria-label="$t('install.button')"
      :title="$t('install.button')"
      @click="install"
    >
      <i class="bi bi-download"></i>
    </button>
    <button
      class="install-dismiss-btn"
      data-testid="install-prompt-dismiss"
      :aria-label="$t('install.dismiss')"
      :title="$t('install.dismiss')"
      @click="dismissed = true"
    >
      <i class="bi bi-x-lg"></i>
    </button>
  </Teleport>
</template>

<style scoped>
.install-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--btn-primary-bg);
  border-radius: 4px;
  background: transparent;
  color: var(--actionbar-font-color);
  font-size: 14px;
  cursor: pointer;
}

.install-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.install-dismiss-btn {
  background: none;
  border: none;
  color: var(--actionbar-font-color);
  cursor: pointer;
  padding: 4px;
  font-size: 16px;
  display: flex;
  align-items: center;
  opacity: 0.7;
}

.install-dismiss-btn:hover {
  opacity: 1;
}
</style>
