function NoteCard({ note, onClick, onDelete, onExtract, onChangeSubject, onChangeGroup, onArchive }) {
    const [showMenu, setShowMenu] = useState(false);

    const handleMenuClick = (e, action) => {
        e.stopPropagation();
        setShowMenu(false);
        action();
    };

    return (
        <div style={{ position: 'relative', background: 'var(--card-bg)', border: '1px solid var(--border-color)', borderRadius: '12px', padding: '1.5rem', marginBottom: '1rem', cursor: 'pointer', transition: 'all 0.2s', boxShadow: '0 2px 8px rgba(0,0,0,0.05)' }}>
            {/* Three-dot menu button */}
            <button
                onClick={(e) => { e.stopPropagation(); setShowMenu(!showMenu); }}
                style={{ position: 'absolute', top: '1rem', right: '1rem', background: 'none', border: 'none', cursor: 'pointer', fontSize: '1.25rem', padding: '0.25rem 0.5rem', color: 'var(--text-secondary)' }}
            >
                ⋮
            </button>

            {/* Dropdown menu */}
            {showMenu && (
                <div style={{ position: 'absolute', top: '3rem', right: '1rem', background: 'var(--bg-primary)', border: '1px solid var(--border-color)', borderRadius: '8px', boxShadow: '0 4px 12px rgba(0,0,0,0.15)', zIndex: 10, minWidth: '200px' }}>
                    <button onClick={(e) => handleMenuClick(e, onExtract)} style={{ width: '100%', padding: '0.75rem 1rem', border: 'none', background: 'none', textAlign: 'left', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '0.875rem' }}>
                        🤖 Extract Content
                    </button>
                    <button onClick={(e) => handleMenuClick(e, onChangeSubject)} style={{ width: '100%', padding: '0.75rem 1rem', border: 'none', background: 'none', textAlign: 'left', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '0.5rem', borderTop: '1px solid var(--border-color)', fontSize: '0.875rem' }}>
                        📚 Change Subject
                    </button>
                    <button onClick={(e) => handleMenuClick(e, onChangeGroup)} style={{ width: '100%', padding: '0.75rem 1rem', border: 'none', background: 'none', textAlign: 'left', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '0.5rem', borderTop: '1px solid var(--border-color)', fontSize: '0.875rem' }}>
                        📁 Change Group
                    </button>
                    <button onClick={(e) => handleMenuClick(e, onArchive)} style={{ width: '100%', padding: '0.75rem 1rem', border: 'none', background: 'none', textAlign: 'left', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '0.5rem', borderTop: '1px solid var(--border-color)', fontSize: '0.875rem' }}>
                        {note.is_archived ? '↩️ Unarchive' : '📦 Archive'}
                    </button>
                    <button onClick={(e) => handleMenuClick(e, onDelete)} style={{ width: '100%', padding: '0.75rem 1rem', border: 'none', background: 'none', textAlign: 'left', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '0.5rem', borderTop: '1px solid var(--border-color)', color: 'var(--danger)', fontSize: '0.875rem' }}>
                        🗑️ Delete
                    </button>
                </div>
            )}

            <div onClick={onClick}>
                <h3 style={{ fontSize: '1.125rem', fontWeight: '600', marginBottom: '0.5rem', paddingRight: '2rem' }}>{note.canvas_enabled && '✏️ '}{note.title}</h3>
                <p style={{ fontSize: '0.875rem', color: 'var(--text-secondary)', marginBottom: '0.75rem' }}>{new Date(note.created_at).toLocaleString()} • {note.block_count} blocks{note.extraction_completed && ' • Extracted'}</p>
                {note.subject && <span style={{ background: 'var(--primary-light)', color: 'var(--primary)', padding: '0.25rem 0.75rem', borderRadius: '12px', fontSize: '0.875rem', marginRight: '0.5rem' }}>{note.subject}</span>}
                {note.note_group && <span style={{ background: 'var(--success-light)', color: 'var(--success)', padding: '0.25rem 0.75rem', borderRadius: '12px', fontSize: '0.875rem' }}>{note.note_group}</span>}
            </div>
        </div>
    );
}

// Export to global scope
window.NoteCard = NoteCard;