.subscribe()

openbridge.customer.subscribe(callback)

openbridge.customer.subscribe((customer) => {
    const nav = document.querySelector('#account-nav')

    if (customer) {
        nav.innerHTML = `
            <span>Hi, ${customer.firstName || 'there'}!</span>
            <a href="/account">My Account</a>
            <button onclick="handleLogout()">Logout</button>
        `
    } else {
        nav.innerHTML = `
            <a href="/login">Login</a>
            <a href="/register">Create Account</a>
        `
    }
})

function useCustomer() {
    let customer = openbridge.customer.getCached()
    const listeners = new Set()

    openbridge.customer.subscribe((c) => {
        customer = c
        listeners.forEach(fn => fn(customer))
    })

    return {
        get customer() { return customer },
        subscribe(fn) {
            listeners.add(fn)
            return () => listeners.delete(fn)
        }
    }
}

// When customer state changes, you might want to merge carts
openbridge.customer.subscribe(async (customer) => {
    if (customer) {
        // Customer just logged in - could sync with their saved cart
        console.log('Customer logged in, cart ready for checkout')
    } else {
        // Customer logged out - cart persists for guest
        console.log('Browsing as guest')
    }
})

// Store unsubscribe function
const unsubscribe = openbridge.customer.subscribe((customer) => {
    updateUI(customer)
})

// Later, when component unmounts or page changes
unsubscribe()