xiaoxia-saas/apps/web/src/pages/editing-planner/components/timeline/TimeRuler.tsx

import React from "react"
import { getRulerStep, MIN_TRACK_WIDTH } from "../../constants/timeline"
import { generateRulerMarks } from "../../utils/timeline"

interface TimeRulerProps {
  totalDuration: number
  pps: number
  onClick: (e: React.MouseEvent<HTMLDivElement>) => void
}

export const TimeRuler: React.FC<TimeRulerProps> = ({ totalDuration, pps, onClick }) => {
  const trackWidth = Math.max(totalDuration * pps, MIN_TRACK_WIDTH)
  const step = getRulerStep(totalDuration)
  const marks = generateRulerMarks(totalDuration, step)

  return (
    <div className="ep-time-ruler" onClick={onClick}>
      <div className="ep-time-ruler-inner" style={{ width: trackWidth }}>
        {marks.map((t) => (
          <span key={t} className="ep-time-mark" style={{ left: `${t * pps}px` }}>
            {t}s
          </span>
        ))}
      </div>
    </div>
  )
}