<template>
  <div class="touch-keypad">
    <button v-for="digit in digits" :key="digit" type="button"
            class="keypad-button" @click="$emit('digit', digit)">
      {{ digit }}
    </button>
    <button type="button" class="keypad-button keypad-action"
            @click="$emit('clear')">Clear</button>
    <button type="button" class="keypad-button" @click="$emit('digit', '0')">0</button>
    <button type="button" class="keypad-button keypad-action"
            aria-label="Backspace" @click="$emit('backspace')">&#9003;</button>
  </div>
</template>

<script setup>
const digits = ['1', '2', '3', '4', '5', '6', '7', '8', '9']
defineEmits(['digit', 'clear', 'backspace'])
</script>

<style scoped>
.touch-keypad {
  display: grid;
  grid-template-columns: repeat(3, 5.2rem);
  gap: 0.65rem;
  justify-content: center;
}
.keypad-button {
  height: 4.4rem;
  font-size: 1.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: var(--bg-card-solid, var(--bg-card));
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: transform 0.05s ease, background 0.1s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.keypad-button:hover { border-color: var(--primary); }
.keypad-button:active {
  background: var(--primary);
  color: #fff;
  transform: scale(0.96);
}
.keypad-action {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-light);
}
.keypad-action:active { color: #fff; }
</style>
