import { StoryboardScene } from '../pages/storyboard-view';
import { StoryboardCard } from './storyboard-card';

interface StoryboardCardListProps {
  scenes: StoryboardScene[];
  selectedSceneId?: string;
  onSceneUpdate: (sceneId: string, updates: Partial<StoryboardScene>) => void;
  onSceneDelete: (sceneId: string) => void;
  onSceneDuplicate: (sceneId: string) => void;
}

export function StoryboardCardList({
  scenes,
  selectedSceneId,
  onSceneUpdate,
  onSceneDelete,
  onSceneDuplicate
}: StoryboardCardListProps) {
  return (
    <div className="flex gap-6 overflow-x-auto hide-scrollbar h-full overflow-y-hidden transition-colors duration-300 rounded-xl p-2">
      {scenes.map((scene, index) => (
        <StoryboardCard
          key={scene.id}
          scene={scene}
          index={index}
          isSelected={scene.id === selectedSceneId}
          onUpdate={(updates) => onSceneUpdate(scene.id, updates)}
          onDelete={() => onSceneDelete(scene.id)}
          onDuplicate={() => onSceneDuplicate(scene.id)}
        />
      ))}
    </div>
  );
} 