import type { MileageMarkerSpec } from '../../types/timeline';
import { cssVars, px } from '../../utils/cssVars';
import styles from './MileageMarker.module.scss';

interface MileageMarkerProps {
  marker: MileageMarkerSpec;
}

export function MileageMarker({ marker }: MileageMarkerProps) {
  const classNames = [styles.marker];
  if (marker.selected) classNames.push(styles.selected);

  return (
    <div
      className={classNames.join(' ')}
      style={cssVars({ '--x': px(marker.left) })}
      title={marker.value}
    >
      {marker.value}
    </div>
  );
}