import { Droppable } from 'react-beautiful-dnd';
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 (
    <Droppable droppableId="storyboard-scenes">
      {(provided) => (
        <div
          ref={provided.innerRef}
          {...provided.droppableProps}
          className="flex gap-6 overflow-x-auto hide-scrollbar h-full overflow-y-hidden p-8"
        >
          {scenes.map((scene, index) => (
            <StoryboardCard
              key={scene.id}
              scene={scene}
              index={index}
              isSelected={selectedSceneId === scene.id}
              onUpdate={(updates) => onSceneUpdate(scene.id, updates)}
              onDelete={() => onSceneDelete(scene.id)}
              onDuplicate={() => onSceneDuplicate(scene.id)}
            />
          ))}
          {provided.placeholder}
        </div>
      )}
    </Droppable>
  );
}