<script setup>
/**
 * 게시물 Export 파일 선택 행
 * @property {Object} file - Export 파일
 * @property {boolean} selected - 선택 여부
 * @property {boolean} disabled - 선택 비활성 여부
 */
defineProps({
  file: {
    type: Object,
    required: true
  },
  selected: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

defineEmits(['toggle'])
</script>

<template>
  <div class="admin-post-export-file-row grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 border-b border-[#edf0f3] px-3 py-2 last:border-b-0">
    <button
      class="admin-post-export-file-row__check inline-flex size-4 items-center justify-center rounded border border-[#cfd6de] bg-white transition focus:outline-none focus:ring-2 focus:ring-[#15171a] focus:ring-offset-1 disabled:cursor-not-allowed disabled:bg-[#f4f6f8]"
      type="button"
      role="checkbox"
      :aria-checked="selected"
      :disabled="disabled"
      :aria-label="`${file.fileName} 선택`"
      @click="$emit('toggle')"
    >
      <span
        v-if="selected"
        class="admin-post-export-file-row__check-mark block size-2 rounded-sm bg-[#15171a]"
      />
    </button>
    <div class="admin-post-export-file-row__body min-w-0">
      <p class="admin-post-export-file-row__name truncate text-sm font-medium text-[#15171a]">
        {{ file.fileName }}
      </p>
      <p class="admin-post-export-file-row__range mt-0.5 text-xs text-[#9aa3ad]">
        {{ file.postStart }}-{{ file.postEnd }}
      </p>
    </div>
    <span
      v-if="file.status !== 'ready' || !file.filePath"
      class="admin-post-export-file-row__status inline-flex h-8 items-center justify-center rounded px-2 text-xs font-semibold text-[#a6b0bb]"
    >
      {{ file.status === 'processing' ? '생성 중' : file.status === 'failed' ? '실패' : '다운로드 대기' }}
    </span>
  </div>
</template>
