import { ticksToSeconds } from '../../lib/format'

interface Chapter {
  StartPositionTicks?: number | null
  Name?: string | null
}

interface Props {
  chapters?: Chapter[] | null
  duration: number
  onJump?: (seconds: number) => void
}

export default function ChapterTicks({ chapters, duration, onJump }: Props) {
  if (!chapters?.length || !duration) return null

  return (
    <div className="absolute inset-0 pointer-events-none">
      {chapters.map((c, i) => {
        const start = ticksToSeconds(c.StartPositionTicks)
        if (start <= 0 || start >= duration) return null
        const left = (start / duration) * 100
        return (
          <button
            key={i}
            onClick={() => onJump?.(start)}
            className="absolute top-1/2 -translate-x-1/2 -translate-y-1/2 w-1 h-2 bg-white/45 hover:bg-white hover:scale-y-150 rounded-sm transition-all duration-150 pointer-events-auto"
            style={{ left: `${left}%` }}
            aria-label={c.Name || `Chapter ${i + 1}`}
          />
        )
      })}
    </div>
  )
}