'use client'

interface ContextMenuProps {
  isDark: boolean
  contextMenu: { x: number; y: number; messageId: string }
  currentConversationId: string | null
  deleteMessage: (convId: string, msgId: string) => void
  onClose: () => void
}

export function ContextMenu({ isDark, contextMenu, currentConversationId, deleteMessage, onClose }: ContextMenuProps) {
  return (
    <div
      className={`fixed rounded-xl border shadow-xl overflow-hidden z-50 ${
        isDark
          ? 'bg-slate-900 border-white/20'
          : 'bg-white border-slate-200'
      }`}
      style={{ top: contextMenu.y, left: contextMenu.x }}
    >
      <button
        onClick={() => {
          // Show quick reactions
          onClose()
        }}
        className={`w-full px-4 py-2 text-left text-sm transition-colors ${
          isDark ? 'hover:bg-white/10 text-white' : 'hover:bg-slate-100 text-slate-700'
        }`}
      >
        Reagieren
      </button>
      <button
        onClick={() => {
          if (currentConversationId) {
            deleteMessage(currentConversationId, contextMenu.messageId)
          }
          onClose()
        }}
        className={`w-full px-4 py-2 text-left text-sm transition-colors ${
          isDark ? 'hover:bg-red-500/20 text-red-400' : 'hover:bg-red-50 text-red-600'
        }`}
      >
        Loeschen
      </button>
    </div>
  )
}