import type { RouteProgressState, StructureSegment } from '../../types/timeline';
import { isStructureAssetState } from '../../constants/routeSegmentAssets';
import { cssVars, px } from '../../utils/cssVars';
import styles from './RouteSegment.module.scss';

interface RouteSegmentProps {
  segment: StructureSegment;
  state: RouteProgressState;
}

/** Three-slice structure marker: fixed caps, stretchable center. */
export function RouteSegment({ segment, state }: RouteSegmentProps) {
  const assetState = isStructureAssetState(state) ? state : 'upcoming';
  const classNames = [styles.segment, styles[segment.type], styles[assetState]];

  return (
    <div
      className={classNames.join(' ')}
      title={segment.label}
      style={cssVars({
        '--seg-left': px(segment.left),
        '--seg-top': px(segment.top),
        '--seg-width': px(segment.width),
        '--seg-height': px(segment.height),
        '--seg-cap-width': px(segment.capWidth),
        '--seg-center-height': px(segment.centerHeight),
      })}
    >
      <div className={styles.capLeft} />
      <div className={styles.center} />
      <div className={styles.capRight} />
    </div>
  );
}
