<template>
  <!-- Scrollable grid of monospace name chips — the preview "here's a sample of
       what will change" surface shared by the maintenance cards (DRY pattern
       sweep 2026-06-09). Pass `names` for the common case; use the default slot
       to render custom chips (style them `.fc-name` and they inherit the look
       via :slotted). The caller keeps its own v-if for the empty case. -->
  <div class="fc-name-grid">
    <slot>
      <span v-for="(n, i) in names" :key="i" class="fc-name">{{ n }}</span>
    </slot>
  </div>
</template>

<script setup>
defineProps({
  names: { type: Array, default: () => [] },
})
</script>

<style scoped>
.fc-name-grid {
  display: flex; flex-wrap: wrap; gap: 4px 8px;
  max-height: 200px; overflow-y: auto;
  padding: 8px; border-radius: 4px;
  background: rgb(var(--v-theme-surface-light));
}
.fc-name, :slotted(.fc-name) {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: rgb(var(--v-theme-on-surface-variant));
}
</style>
