<template>
  <thead class="bg-gray-50 dark:bg-gray-800">
    <tr>
      <th
        v-for="(field, index) in fields"
        :key="field.uniqueKey"
        :class="{
          [`text-${field.textAlign}`]: true,
          'whitespace-nowrap': !field.wrapping,
        }"
        class="uppercase text-gray-500 text-xxs tracking-wide py-2 px-2"
      >
        <span>{{ field.indexName }}</span>
      </th>

      <!-- View, Edit, and Delete -->
      <th class="uppercase text-xxs tracking-wide px-2 py-2">
        <span class="sr-only">{{ __('Controls') }}</span>
      </th>
    </tr>
  </thead>
</template>

<script>
export default {
  props: {
    resourceName: String,
    fields: {
      type: [Object, Array],
    }, 
  }
}
</script>
