<script setup>
defineProps({ fonts: Array })

function fontIcon(status) {
  if (status === 'safe') return '✓'
  if (status === 'professional') return '⚠'
  return '◎'
}

function fontIconClass(status) {
  if (status === 'safe') return 'text-green-500'
  if (status === 'professional') return 'text-amber-500'
  return 'text-gray-400'
}

function fontStatusText(font) {
  if (font.status === 'safe') return 'Available in Word'
  if (font.status === 'professional')
    return `Install on client machine · If missing: Word uses ${font.substitute}`
  return 'Unknown · Verify availability'
}
</script>

<template>
  <div>
    <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Fonts</h3>
    <div class="divide-y divide-gray-50">
      <div v-for="font in fonts" :key="font.name" class="flex items-center gap-3 py-2.5">
        <span :class="['text-sm w-4 text-center flex-shrink-0', fontIconClass(font.status)]">
          {{ fontIcon(font.status) }}
        </span>
        <span class="text-sm font-medium text-gray-900 w-44 flex-shrink-0 truncate">{{ font.name }}</span>
        <span class="text-xs text-gray-500 flex-1 min-w-0 truncate">{{ fontStatusText(font) }}</span>
        <span v-if="font.usedFor" class="text-xs text-gray-400 font-mono hidden sm:block flex-shrink-0">{{ font.usedFor }}</span>
      </div>
    </div>
  </div>
</template>
