<template>
  <dl class="document-grid" :style="gridStyle">
    <div
      v-for="field in fields"
      :key="field.key"
      class="document-grid-cell"
      :class="field.class"
    >
      <dt class="document-grid-label">{{ field.label }}</dt>
      <dd class="document-grid-value">
        <slot :name="field.key" :field="field">
          {{ field.value ?? "-" }}
        </slot>
      </dd>
    </div>
  </dl>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  fields: {
    type: Array,
    required: true
  },
  columns: {
    type: [Number, String],
    default: 4
  }
});

const normalizedColumns = computed(() => {
  const columns = Number(props.columns);
  if (!Number.isFinite(columns)) return 4;
  return Math.min(Math.max(Math.trunc(columns), 1), 6);
});

const gridStyle = computed(() => ({
  "--document-grid-columns": normalizedColumns.value
}));
</script>
