<script setup lang="ts">
interface ColorDict {
  name: string;
  value: string;
}

interface Props {
  colors: ColorDict[];
}

defineProps<Props>();
</script>

<template>
  <table class="color-table">
    <thead class="color-table__head">
      <tr class="color-table__row">
        <th class="color-table__heading name">Body part</th>
        <th class="color-table__heading value">Value</th>
        <th class="color-table__heading color">Color</th>
      </tr>
    </thead>
    <tbody class="color-table__body">
      <tr class="color-table__row" v-for="(color, idx) in colors" :key="idx">
        <td class="color-table__cell name">{{ color.name }}</td>
        <td class="color-table__cell value">{{ color.value }}</td>
        <td
          class="color-table__cell color"
          :style="{ 'background-color': color.value }"
        ></td>
      </tr>
    </tbody>
  </table>
</template>

<style lang="scss">
.color-table {
  &__heading {
    &.name {
      text-align: right;
    }
  }

  &__cell {
    &.name {
      text-align: right;
    }

    &.value {
      font-family: Menlo, JetBrains Mono, Source Code Pro, Monaco, Ubuntu Mono,
        Roboto Mono, Cascadia Code, Consolas, monospace;
      text-align: center;
    }
  }
}
</style>
