// Sticky time axis at the top of the timeline grid. Shares the same
// zoom/pan transform as the rows so labels line up with ticks.
function TimeAxis({ zoom, pan }) {
  return (
    <div className="time-axis">
      <div
        className="time-axis-inner"
        style={{
          width: (zoom * 100) + '%',
          transform: `translateX(${-pan}px)`,
        }}
      >
        {MeowUtil.HOUR_TICKS.map((t, i) => {
          if (!t.labeled) {
            return (
              <div
                key={i}
                className="axis-tick axis-tick-minor"
                style={{ left: (t.frac * 100) + '%' }}
              />
            );
          }
          return (
            <div
              key={i}
              className="axis-label"
              style={{ left: (t.frac * 100) + '%' }}
            >
              <div className="axis-tick axis-tick-major" />
              <div className="axis-text">{MeowUtil.hourLabel(t.hour)}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

window.TimeAxis = TimeAxis;