<script setup lang="ts">
const props=withDefaults(defineProps<{label?:string;maskedValue:string;value?:string;revealed?:boolean;canReveal?:boolean;reason?:string}>(),{revealed:false,canReveal:false})
const emit=defineEmits<{reveal:[];hide:[]}>()
</script>
<template>
  <span class="kbx-masked-value">
    <span v-if="label" class="kbx-masked-value__label">{{ label }}</span>
    <span class="kbx-masked-value__text">{{ revealed ? (value ?? maskedValue) : maskedValue }}</span>
    <button v-if="canReveal && !revealed" type="button" class="kbx-masked-value__action" @click="emit('reveal')">전체보기</button>
    <button v-else-if="revealed" type="button" class="kbx-masked-value__action" @click="emit('hide')">가리기</button>
    <span v-if="!canReveal && reason" class="kbx-masked-value__reason">{{ reason }}</span>
  </span>
</template>
<style scoped>
.kbx-masked-value{display:inline-flex;align-items:center;gap:var(--kbx-space-2)}
.kbx-masked-value__label{font-weight:500}.kbx-masked-value__action{border:0;background:none;text-decoration:underline;cursor:pointer}.kbx-masked-value__reason{font-size:var(--kbx-font-xs);color:var(--kbx-color-text-muted)}
</style>
