<script setup>

defineProps({
  title: String,
  description: String,
  tableHead: Array,
  tableBody: Array
});

</script>
<template>
  <div class="relative overflow-x-auto">
    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
      <thead class="text-xs text-gray-700 uppercase bg-gray-200 dark:bg-gray-700 dark:text-gray-400">
        <th scope="col" class="px-6 py-3 font-bold" v-for="h in tableHead">{{ h.data }}</th>
      </thead>
      <tbody>
        <tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-100 hover:bg-gray-100 even:dark:bg-gray-800 border-b dark:border-gray-700" v-for="row in tableBody">
          <th scope="row" class="px-6 py-4 font-light text-gray-900 whitespace-nowrap dark:text-white" v-for="col in row.cols">
            <a v-if="col.link !== undefined" :href="route(col.link.route, col.link.options)">{{ col.data }}</a>
            <span v-else>{{ col.data }}</span>
          </th>
        </tr>
      </tbody>
    </table>
  </div>
</template>