<script setup lang="ts">
interface Props {
  headings: string[]
  data: string[][]
}

defineProps<Props>()
</script>

<template>
  <table class="data-table">
    <thead class="data-table__head">
      <tr class="data-table__row">
        <th class="data-table__heading" v-for="(heading, idx) in headings" :key="idx">
          {{ $t(heading) }}
        </th>
      </tr>
    </thead>
    <tbody class="data-table__body">
      <tr class="data-table__row" v-for="(row, idx) in data" :key="idx">
        <td class="data-table__cell" v-for="(cell, idx) in row" :key="idx">
          {{ $t(cell) }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

<style lang="scss">
.data-table {
  table-layout: fixed;

  &__cell:first-child {
    text-align: right;
  }
}
</style>
