<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">{{ $t('data.colors.headings[0]') }}</th>
        <th class="color-table__heading value">{{ $t('data.colors.headings[1]') }}</th>
        <th class="color-table__heading color">{{ $t('data.colors.headings[2]') }}</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">{{ $t(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>
