<script lang="ts" setup>
const { obj = {} } = defineProps<{ obj: { [index: string]: unknown } }>()
</script>

<template>
  <table>
    <thead>
      <tr>
        <th>Property</th>
        <th>Value</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="property in Object.keys(obj)" :key="property">
        <td>
          <span>{{ property }}</span>
        </td>
        <td>
          <span>{{ obj[property] }}</span>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<style scoped>
table {
  background-color: white;
  border-collapse: collapse;
}

td,
th {
  padding: 0.25em 0.5em;
  border: 1px solid black;
}

td:first-child,
th:first-child {
  text-align: right;
}

td:last-child span {
  white-space: pre;
  margin: 0.5em;
  background: black;
  color: white;
}
</style>
