"use client";

import { SceneBlock } from "@/components/studio/timeline/SceneBlock";
import { getSceneTimelineSegments } from "@/lib/studio-timeline";
import type { Scene } from "@/lib/studio-types";

interface SceneTrackProps {
  scenes: Scene[];
  activeSceneId: string;
  pxPerSecond: number;
  onSceneSelect: (sceneId: string) => void;
  onSceneDurationChange: (sceneId: string, duration: number) => void;
}

export function SceneTrack({
  scenes,
  activeSceneId,
  pxPerSecond,
  onSceneSelect,
  onSceneDurationChange,
}: SceneTrackProps) {
  const segments = getSceneTimelineSegments(scenes);

  return (
    <div className="flex h-12 shrink-0 items-center gap-0.5 py-1">
      {segments.map(({ scene, index }) => (
        <SceneBlock
          key={scene.id}
          scene={scene}
          colorIndex={index}
          isActive={scene.id === activeSceneId}
          pxPerSecond={pxPerSecond}
          onSelect={() => onSceneSelect(scene.id)}
          onDurationChange={(duration) =>
            onSceneDurationChange(scene.id, duration)
          }
        />
      ))}
    </div>
  );
}
