<script setup>
import { onMounted } from 'vue'
import { createSignal } from '@signal-js/browser'

let signal = null

onMounted(async () => {
  signal = createSignal({ endpoint: '...', apiKey: '...', projectId: '...' })
  await signal.start()
})

function associateWithCompany(companyId, companyName) {
  signal?.group('company', companyId, { name: companyName })
}

function getCurrentGroups() {
  const groups = signal?.getGroups()
  console.log('User groups:', groups)
}
</script>

<template>
  <div>
    <button @click="associateWithCompany('acme', 'Acme Corp')">
      Join Company
    </button>
    <button @click="getCurrentGroups()">Show Groups</button>
  </div>
</template>

const signal = createSignal({ endpoint: '...', apiKey: '...', projectId: '...' });
await signal.start();

// Associate user with company
signal.group('company', 'acme', { name: 'Acme Corp', plan: 'enterprise' });

// Get all groups
const groups = signal.getGroups();
console.log('User groups:', groups);