// Tiny yellow markers rendered under the ruler showing where subtitle cues land.

'use client';

import { useEditor } from '@/store/editor';
import { RULER_HEIGHT } from './constants';

interface Props {
  zoom: number;
}

export function SubtitleMarkers({ zoom }: Props) {
  const subtitles = useEditor((s) => s.subtitles);
  if (subtitles.length === 0) return null;
  return (
    <div
      className="absolute top-0 left-0 right-0 pointer-events-none"
      style={{ height: RULER_HEIGHT }}
    >
      {subtitles.map((cue) => (
        <div
          key={cue.id}
          className="absolute h-2 bg-capcut-yellow rounded"
          style={{
            left: cue.start * zoom,
            width: Math.max(2, (cue.end - cue.start) * zoom),
            top: RULER_HEIGHT - 8,
          }}
          title={cue.text}
        />
      ))}
    </div>
  );
}