<script setup lang="ts">
import { computed } from 'vue'

const props=withDefaults(defineProps<{
  current?:number
  total?:number
  itemLabel?:string
  previousDisabled?:boolean
  nextDisabled?:boolean
}>(),{current:0,total:0,itemLabel:'레코드',previousDisabled:false,nextDisabled:false})
const emit=defineEmits<{ previous:[]; next:[] }>()
const position=computed(()=>props.total>0&&props.current>0?`${props.current.toLocaleString('ko-KR')} / ${props.total.toLocaleString('ko-KR')}`:`0 / ${props.total.toLocaleString('ko-KR')}`)
</script>

<template>
  <nav class="kbx-record-navigator" :aria-label="`${itemLabel} 이전·다음 이동`">
    <span class="kbx-record-navigator__position"><small>{{itemLabel}}</small><strong>{{position}}</strong></span>
    <button type="button" :disabled="previousDisabled || current<=1" aria-label="이전 레코드" @click="emit('previous')">‹ <span>이전</span></button>
    <button type="button" :disabled="nextDisabled || current>=total || total===0" aria-label="다음 레코드" @click="emit('next')"><span>다음</span> ›</button>
  </nav>
</template>

<style scoped>
.kbx-record-navigator{display:flex;align-items:center;gap:var(--kbx-space-1);min-height:var(--kbx-control-sm)}.kbx-record-navigator__position{display:flex;align-items:center;gap:var(--kbx-space-1);padding-right:var(--kbx-space-2);white-space:nowrap}.kbx-record-navigator__position small{color:var(--kbx-color-text-muted);font-size:var(--kbx-font-xs)}.kbx-record-navigator__position strong{font-size:var(--kbx-font-sm);font-weight:600}.kbx-record-navigator button{min-height:var(--kbx-control-xs);padding:0 var(--kbx-space-2);border:var(--kbx-border-width) solid var(--kbx-color-border);border-radius:var(--kbx-radius-sm);background:var(--kbx-color-surface);color:var(--kbx-color-text);font-size:var(--kbx-font-xs)}.kbx-record-navigator button:hover:not(:disabled){border-color:var(--kbx-color-primary);background:var(--kbx-color-surface-hover)}.kbx-record-navigator button:focus-visible{outline:calc(var(--kbx-border-width) * 2) solid var(--kbx-color-focus);outline-offset:var(--kbx-border-width)}.kbx-record-navigator button:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:56rem){.kbx-record-navigator button span{display:none}}
@media(forced-colors:active){.kbx-record-navigator button:focus-visible{outline-color:Highlight}}
</style>
