video-flow-b/components/script-overview/scene-card-list.tsx

import { Droppable } from 'react-beautiful-dnd';
import { Scene } from '../pages/script-overview';
import { SceneCard } from './scene-card';

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

export function SceneCardList({
  scenes,
  selectedSceneId,
  onSceneUpdate,
  onSceneDelete,
  onSceneDuplicate
}: SceneCardListProps) {
  return (
    <Droppable droppableId="scenes" direction="horizontal">
      {(provided, snapshot) => (
        <div
          ref={provided.innerRef}
          {...provided.droppableProps}
          className={`
            flex gap-6 overflow-x-auto hide-scrollbar h-full overflow-y-hidden
            ${snapshot.isDraggingOver ? 'bg-white/5' : ''}
            transition-colors duration-300 rounded-xl p-2
          `}
        >
          {scenes.map((scene, index) => (
            <SceneCard
              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)}
            />
          ))}
          {provided.placeholder}
        </div>
      )}
    </Droppable>
  );
}