import React from 'react'; import { Copy, Trash2, Lock, Unlock, Scissors, Layers, ArrowUp, ArrowDown, Eye, EyeOff } from 'lucide-react'; import { TimelineElement } from '../../types'; interface ElementContextMenuProps { elementId: string; x: number; y: number; element: TimelineElement; onClose: () => void; onDuplicate: (id: string) => void; onDelete: (id: string) => void; onToggleLock: (id: string) => void; onSplit: (id: string) => void; onBringForward: (id: string) => void; onSendBackward: (id: string) => void; } const MenuItem: React.FC<{ icon: React.ReactNode; label: string; onClick: () => void; danger?: boolean; disabled?: boolean; }> = ({ icon, label, onClick, danger, disabled }) => ( ); /** * ElementContextMenu — right-click context menu for timeline elements. * Actions: Duplicate, Split, Lock/Unlock, Move Forward/Backward, Delete. */ export const ElementContextMenu: React.FC = ({ elementId, x, y, element, onClose, onDuplicate, onDelete, onToggleLock, onSplit, onBringForward, onSendBackward, }) => { const isBrand = element.isBrandElement; return ( <> {/* Backdrop */}
{ e.preventDefault(); onClose(); }} /> {/* Menu */}
} label="Duplicar" onClick={() => { onDuplicate(elementId); onClose(); }} disabled={isBrand} /> } label="Dividir en Playhead" onClick={() => { onSplit(elementId); onClose(); }} disabled={isBrand} />
: } label={element.isLocked ? "Desbloquear" : "Bloquear"} onClick={() => { onToggleLock(elementId); onClose(); }} disabled={isBrand} /> } label="Mover Adelante" onClick={() => { onBringForward(elementId); onClose(); }} /> } label="Mover Atrás" onClick={() => { onSendBackward(elementId); onClose(); }} />
} label="Eliminar" onClick={() => { onDelete(elementId); onClose(); }} danger disabled={isBrand} />
); };