<template>
  <Teleport to="body">
    <Transition name="toast">
      <div
        v-if="visible"
        class="fixed top-4 right-4 z-50 bg-sky-dark-50 border border-sky-accent/50 rounded-lg px-4 py-3 shadow-lg shadow-sky-accent/20 flex items-center gap-3"
      >
        <span class="text-2xl" aria-hidden="true">*</span>
        <div>
          <p class="font-ui font-semibold text-sky-accent">
            {{ $t('easterEgg.found') }}
          </p>
          <p class="text-sm text-sky-text/60">
            {{ $t('easterEgg.count', { found: foundCount, total: totalEasterEggs }) }}
          </p>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup lang="ts">
defineProps<{
  visible: boolean
}>()

const progressionStore = useProgressionStore()
const { availableEasterEggs } = useFetchEasterEggs()

const totalEasterEggs = computed(() => availableEasterEggs.value.length || 8)
const foundCount = computed(() => progressionStore.easterEggsFoundCount)
</script>

<style scoped>
.toast-enter-active,
.toast-leave-active {
  transition: all 0.3s ease;
}

.toast-enter-from {
  opacity: 0;
  transform: translateX(100px);
}

.toast-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}
</style>
