import type { MouseEvent } from 'react';
import styles from './TimelineCursor.module.scss';

interface TimelineCursorProps {
  mileageText: string;
  /** 현재 위치가 역방향(km 감소) 구간이면 커서를 파란색으로. */
  reverse?: boolean;
  /** 라인·뱃지를 직접 드래그해 이동시킬 때 호출 (seekArea와 동일 핸들러). */
  onSeekDown: (e: MouseEvent<HTMLDivElement>) => void;
}

// 커서 x 위치(--cursor-x)는 상위(StationBar wrapRef)에서 rAF로 직접 갱신한다(transform).
export function TimelineCursor({ mileageText, reverse, onSeekDown }: TimelineCursorProps) {
  return (
    <div className={`${styles.cursor} ${reverse ? styles.reverse : ''}`}>
      <div className={styles.line} onMouseDown={onSeekDown} />
      <div className={styles.badge} onMouseDown={onSeekDown}>{mileageText}</div>
    </div>
  );
}
