<script setup lang="ts">
import type { TimelineMarkerData } from '@/lib/Timeline'
import { markerToAbsoluteTime } from '@/lib/Timeline'
import { usePx } from '@/lib/usePx'
import { useTimelineStore } from '@/store/TimelineStore'

const {
  marker,
} = defineProps<{
  marker: TimelineMarkerData
}>()

const timeline = useTimelineStore()

const left = usePx(() => {
  const seconds = markerToAbsoluteTime(timeline.audioTrack!, marker)
  const px = timeline.secondsToPixels(seconds)
  return px
})
</script>

<template>
  <div
    class="tw:absolute tw:w-0 tw:h-full tw:opacity-60 tw:border-l" :style="{
      left: left.string,
      borderColor: marker.color,
    }"
  />
</template>

<style scoped></style>
