import type { MouseEvent } from 'react';
import { renderX } from '../../mocks/route';
import { cssVars, px } from '../../utils/cssVars';
import styles from './TimelineCursor.module.scss';

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

export function TimelineCursor({ posPx, mileageText, reverse, onSeekDown }: TimelineCursorProps) {
  return (
    <div
      className={`${styles.cursor} ${reverse ? styles.reverse : ''}`}
      style={cssVars({ '--cursor-x': px(renderX(posPx)) })}
    >
      <div className={styles.line} onMouseDown={onSeekDown} />
      <div className={styles.badge} onMouseDown={onSeekDown}>{mileageText}</div>
    </div>
  );
}
