import React from 'react'

interface CheatMenuProps {
    showHitboxes: boolean
    setShowHitboxes: (show: boolean) => void
    onSpawnRamp: () => void
}

export function CheatMenu({ showHitboxes, setShowHitboxes, onSpawnRamp }: CheatMenuProps) {
    return (
        <div
            onPointerDown={(e) => e.stopPropagation()}
            onClick={(e) => e.stopPropagation()}
            style={{
                position: 'absolute',
                top: '20px',
                right: '20px',
                background: 'rgba(0, 0, 0, 0.7)',
                padding: '15px',
                borderRadius: '8px',
                color: 'white',
                fontFamily: 'monospace',
                zIndex: 1000,
                border: '1px solid #444',
                display: 'flex',
                flexDirection: 'column',
                gap: '10px'
            }}>
            <h3 style={{ margin: '0 0 5px 0', fontSize: '16px', color: '#ff00ff' }}>CHEAT MENU</h3>
            <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                <input
                    type="checkbox"
                    id="hitbox-toggle"
                    checked={showHitboxes}
                    onChange={(e) => setShowHitboxes(e.target.checked)}
                    style={{ cursor: 'pointer' }}
                />
                <label htmlFor="hitbox-toggle" style={{ cursor: 'pointer', userSelect: 'none' }}>
                    Show Hitboxes
                </label>
            </div>
            <button
                onClick={onSpawnRamp}
                style={{
                    background: '#444',
                    color: 'white',
                    border: '1px solid #666',
                    padding: '5px 10px',
                    borderRadius: '4px',
                    cursor: 'pointer',
                    fontFamily: 'inherit'
                }}
            >
                Spawn Ramp
            </button>
        </div>
    )
}
