<script lang="ts">
  // A best-move word drawn as a row of game tiles, mirroring the board's placed-tile
  // look (letter top-left, point value bottom-right) at a small fixed size. A blank tile
  // shows its letter but no value, exactly as on the board; in Erudit it also carries the
  // blank's star (✻) in the value corner. Letters are upper-cased for display. The tile
  // values ride on each tile, so this needs only the variant id (for the star) — not the
  // variant's alphabet table, which the statistics screen has not cached.
  import type { BestMoveTile, Variant } from '../lib/model';
  import { usesStarBlank, BLANK_STAR } from '../lib/variants';

  let { word, variant }: { word: BestMoveTile[]; variant: Variant } = $props();

  const label = $derived(word.map((t) => t.letter).join('').toUpperCase());
</script>

<span class="word" aria-label={label}>
  {#each word as tile, i (i)}
    <span class="tile" class:blank={tile.blank} aria-hidden="true">
      <span class="letter">{tile.letter.toUpperCase()}</span>
      {#if !tile.blank}
        <span class="val">{tile.value}</span>
      {:else if usesStarBlank(variant)}
        <span class="val blankmark">{BLANK_STAR}</span>
      {/if}
    </span>
  {/each}
</span>

<style>
  .word {
    display: inline-flex;
    gap: 2px;
  }
  .tile {
    position: relative;
    flex: none;
    width: 22px;
    height: 22px;
    background: var(--tile-bg);
    color: var(--tile-text);
    border-radius: 3px;
    box-shadow: inset 0 -2px 0 var(--tile-edge);
  }
  .letter {
    position: absolute;
    top: 6%;
    left: 11%;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
  }
  .val {
    position: absolute;
    right: 8%;
    bottom: 3%;
    font-size: 7px;
    font-weight: 600;
  }
  /* A placed Erudit blank ("звёздочка") shows its star where the (absent) point value sits,
     its ink kept on the value digits' line (mirrors the board tile). */
  .blankmark {
    font-size: 8px;
    bottom: 0;
  }
</style>
