<script setup lang="ts">
import AppIcon from '@/components/ui/AppIcon.vue'

defineProps<{ amount: number }>()
defineEmits<{ click: [] }>()
</script>

<template>
  <button class="coin-chip" type="button" @click="$emit('click')">
    <AppIcon class="coin-icon" icon="coin" :size="16" />
    <span class="coin-amount">{{ amount }}</span>
    <span class="coin-label">монет</span>
  </button>
</template>

<style scoped>
.coin-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--color-primary-a10);
  border: 1px solid var(--color-coin-chip-border);
  border-radius: 20px;
  padding: 5px 12px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}
.coin-chip:hover {
  background: var(--color-primary-a18);
  border-color: var(--color-primary-a50);
}
.coin-chip:focus-visible {
  outline: 2px solid var(--color-primary-a45);
  outline-offset: 2px;
}
.coin-icon { color: var(--color-coin-chip-text); }
.coin-amount { font-weight: 800; font-size: 14px; color: var(--color-coin-chip-text); }
.coin-label { font-size: 12px; color: var(--color-coin-chip-label); }
</style>
