<script setup lang="ts">
import { formatBeats, formatTime } from '@/lib/AudioTrack'

defineProps<{
  seconds: number
  beats: number
}>()
</script>

<template>
  <div class="timestamp">
    <div title="seconds">
      {{ formatTime(seconds) }}
    </div>
    <div title="beats">
      {{ formatBeats(beats) }}
    </div>
  </div>
</template>

<style>
.timestamp {
  display: inline flex;
  flex-direction: column;
  justify-content: center;
  align-items: end;
  gap: 0;
}
</style>
