<script lang="ts">
  import { getHourSize } from "../../global-store/derived-settings";
  import { settingsStore } from "../../global-store/settings";
  import { hoursToMoment } from "../../util/moment";

  export let visibleHours: number[];
</script>

<div class="hours-container">
  {#each visibleHours as hour}
    <div style:flex-basis="{getHourSize($settingsStore)}px" class="hour">
      {hoursToMoment(hour).format($settingsStore.hourFormat)}
    </div>
  {/each}
</div>

<style>
  .hours-container {
    position: sticky;
    z-index: 5;
    left: 0;

    display: flex;
    flex-direction: column;

    height: fit-content;

    background-color: var(--background-primary);
    border-right: var(--border-base);
    box-shadow: var(--ruler-box-shadow, none);
  }

  .hour {
    display: flex;
    flex: 1 0 0;
    flex-direction: row-reverse;

    padding-inline: var(--size-4-2);

    font-size: var(--font-ui-smaller);
    font-weight: var(--font-semibold);
    color: var(--text-muted);
  }

  .hour:not(:last-child) {
    border-bottom: var(--border-base);
  }
</style>
