import { terminalCircleAsset } from '../../constants/routeSegmentAssets';
import type { TerminalMarker as TerminalMarkerSpec } from '../../types/timeline';
import { resolveTerminalState } from '../../utils/routeProgress';
import { cssVars, px } from '../../utils/cssVars';
import styles from './TerminalMarker.module.scss';

interface TerminalMarkerProps {
  marker: TerminalMarkerSpec;
  posPx: number;
}

export function TerminalMarker({ marker, posPx }: TerminalMarkerProps) {
  const state = resolveTerminalState(posPx, marker);

  return (
    <img
      className={styles.marker}
      src={terminalCircleAsset(state)}
      alt=""
      style={cssVars({
        '--marker-left': px(marker.left),
        '--marker-top': px(marker.top),
        '--marker-width': px(marker.width),
        '--marker-height': px(marker.height),
      })}
    />
  );
}
