<script lang="ts">
  /**
   * One number, sized by importance. The whole ride screen is built from these,
   * which is how the visual hierarchy stays honest: importance is a prop, not a
   * pile of one-off styles.
   */
  interface Props {
    label: string;
    value: string;
    unit?: string;
    size?: 'hero' | 'big' | 'mid' | 'small';
    colour?: string;
    sub?: string | null;
    dim?: boolean;
    align?: 'start' | 'end';
  }

  let {
    label,
    value,
    unit = '',
    size = 'mid',
    colour = 'var(--ink)',
    sub = null,
    dim = false,
    align = 'start',
  }: Props = $props();
</script>

<div class="readout {size}" class:dim style:align-items={align === 'end' ? 'flex-end' : 'flex-start'}>
  <span class="label">{label}</span>
  <span class="value" style:color={colour}>
    {value}{#if unit}<span class="unit">{unit}</span>{/if}
  </span>
  {#if sub}<span class="sub">{sub}</span>{/if}
</div>

<style>
  .readout {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    min-width: 0;
  }

  .value {
    font-weight: 300;
    line-height: 0.92;
    letter-spacing: -0.035em;
    white-space: nowrap;
  }

  .unit {
    font-size: 0.34em;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-left: 0.22em;
    color: var(--ink-dim);
    vertical-align: baseline;
  }

  .sub {
    font-size: var(--type-sub);
    font-weight: 600;
    color: var(--ink-dim);
    /* Nowrap was right when a readout had a fifth of a 1440 px window. In a
       two-column compact grid the subtitle is longer than its column, and a
       nowrap overflow paints over the number beside it. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /*
   * Sizes come from the measurement (ui/src/lib/viewport.ts), not from `vw`.
   * `7vw` of a phone viewport is 29 px — under the floor at which the hero
   * number stops being readable from the bars — while `7vw` of a 4K monitor is
   * 190 px. Neither is a size anybody chose.
   */
  .hero .value {
    font-size: var(--type-hero);
  }
  .big .value {
    font-size: var(--type-big);
  }
  .mid .value {
    font-size: var(--type-mid);
    font-weight: 400;
  }
  .small .value {
    font-size: var(--type-small);
    font-weight: 500;
  }

  .dim .value {
    color: var(--ink-dim) !important;
  }
</style>
