<script setup lang="ts">
defineProps<{ hexagram: Record<string, any>; compact?: boolean }>();

function transformedValue(value: number): number {
  return value === 6 ? 7 : value === 9 ? 8 : value;
}
</script>

<template>
  <div class="heaven-hex-pair" :class="{ 'heaven-hex-compact': compact }">
    <div class="heaven-hex-symbol">
      <strong>{{ hexagram.name }}</strong>
      <div class="heaven-hex-lines">
        <span v-for="line in [...hexagram.lines].reverse()" :key="line.position" class="heaven-yao" :class="{ yin: line.value % 2 === 0, moving: line.moving }"><i /><i /></span>
      </div>
      <small>{{ hexagram.outer_trigram }}上 · {{ hexagram.inner_trigram }}下</small>
    </div>
    <span class="heaven-change-arrow" aria-label="变化为">→</span>
    <div class="heaven-hex-symbol">
      <strong>{{ hexagram.transformed.name }}</strong>
      <div class="heaven-hex-lines">
        <span v-for="line in [...hexagram.lines].reverse()" :key="line.position" class="heaven-yao" :class="{ yin: transformedValue(line.value) % 2 === 0 }"><i /><i /></span>
      </div>
      <small>{{ hexagram.transformed.outer_trigram }}上 · {{ hexagram.transformed.inner_trigram }}下</small>
    </div>
  </div>
</template>
