<script setup>
// 재사용 PIN 키패드 — 점 표시 + 숫자 키패드. 길이 도달 시 complete 방출.
const props = defineProps({
  value: { type: String, default: '' },
  length: { type: Number, default: 4 },
})
const emit = defineEmits(['update:value', 'complete'])

function press(d) {
  if (props.value.length >= props.length) return
  const next = props.value + d
  emit('update:value', next)
  if (next.length === props.length) emit('complete', next)
}
function del() {
  emit('update:value', props.value.slice(0, -1))
}
</script>

<template>
  <div class="pinpad">
    <div class="dots">
      <span v-for="i in length" :key="i" class="dot" :class="{ on: value.length >= i }"></span>
    </div>
    <div class="keys">
      <button v-for="n in 9" :key="n" type="button" class="key" @click="press(String(n))">{{ n }}</button>
      <span class="key empty" aria-hidden="true"></span>
      <button type="button" class="key" @click="press('0')">0</button>
      <button type="button" class="key del" aria-label="지우기" @click="del">⌫</button>
    </div>
  </div>
</template>

<style scoped>
.pinpad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}
.dots {
  display: flex;
  gap: 0.9rem;
}
.dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0.5;
}
.dot.on {
  background: currentColor;
  opacity: 1;
}
.keys {
  display: grid;
  grid-template-columns: repeat(3, 64px);
  gap: 0.8rem;
}
.key {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-background-soft);
  color: var(--color-text);
  font-size: 1.4rem;
  font-weight: 600;
  cursor: pointer;
}
.key:active {
  background: var(--color-border);
}
.key.empty {
  border: 0;
  background: transparent;
  cursor: default;
}
.key.del {
  font-size: 1.2rem;
  border: 0;
  background: transparent;
}
</style>
