import { html } from './vendor/htm-preact.js';

/**
 * A group's name with the `@owner` handle under it.
 *
 * Group names are unique only per owner account (the hub enforces that), so the
 * `@handle` is what tells two groups called "photos" apart. `owner` is the
 * owner's username for a local group, or the source hub for a federated one
 * (decision 5 in ~/next/groupnames.md); the caller decides which.
 *
 * `inline` renders "name@owner" on one line, for places that cannot take a
 * block — a badge, a `confirm()` string built elsewhere.
 */
export function GroupName({ name, owner, inline = false }) {
  if (inline) return owner ? `${name}@${owner}` : name;
  return html`
    <span class="gn">
      <span class="gn-name">${name}</span>
      ${owner && html`<span class="gn-owner">@${owner}</span>`}
    </span>
  `;
}