import React from 'react';
import FloatingMenu, { FloatingMenuDivider, FloatingMenuItem, getPointFloatingMenuPosition } from './FloatingMenu';

interface ContextMenuProps {
    x: number;
    y: number;
    onClose: () => void;
    items: Array<{
        label?: string;
        icon?: React.ReactNode;
        onClick?: () => void;
        disabled?: boolean;
        divider?: boolean;
    }>;
    extraContent?: React.ReactNode;
}

const ContextMenu: React.FC<ContextMenuProps> = ({ x, y, onClose, items, extraContent }) => {
    return (
        <FloatingMenu
            position={getPointFloatingMenuPosition(x, y)}
            widthClassName='w-auto'
            minWidth='11.5rem'
            maxWidth='18rem'
            onClose={onClose}
        >
            {items.map((item, index) => {
                if (item.divider) {
                    return <FloatingMenuDivider key={index} />;
                }

                if (!item.label || !item.icon) {
                    return null;
                }

                const isDanger = item.label === 'Force Delete';
                const isTrash = item.label === 'Move to Trash';

                return (
                    <FloatingMenuItem
                        key={index}
                        label={item.label}
                        icon={item.icon}
                        danger={isDanger}
                        mutedDanger={isTrash}
                        disabled={item.disabled}
                        onClick={() => {
                            if (item.onClick) {
                                item.onClick();
                                onClose();
                            }
                        }}
                    />
                );
            })}
            {extraContent && (
                <div className='mt-1 border-t border-neutral-700/80 pt-1'>
                    {extraContent}
                </div>
            )}
        </FloatingMenu>
    );
};

export default ContextMenu;