import { FluentComponent } from '../core/fluent-component'
import { createUniversalComponent } from '../core/component-factory'

class FluentBreadcrumbInternal extends FluentComponent {
  static tag = 'fluent-breadcrumb'

  render() {
    this.shadowRootRef.innerHTML = `
      <style>
        :host { display: block; }
        .fluent-breadcrumb { display: flex; flex-wrap: wrap; gap: 0.5rem; color: var(--fluent-color-neutral-700); }
      </style>
      <nav class="fluent-breadcrumb"><slot></slot></nav>
    `
  }
}

export const FluentBreadcrumb = createUniversalComponent({
  tag: 'fluent-breadcrumb',
  class: FluentBreadcrumbInternal
})

if (typeof window !== 'undefined') {
  if (!customElements.get(FluentBreadcrumbInternal.tag)) {
    customElements.define(FluentBreadcrumbInternal.tag, FluentBreadcrumbInternal)
  }
}