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

class FluentMenuInternal extends FluentComponent {
  static tag = 'fluent-menu'

  render() {
    this.shadowRootRef.innerHTML = `
      <style>
        :host { display: block; }
        .fluent-menu { list-style: none; margin: 0; padding: 0.25rem; display: flex; gap: 0.5rem; }
      </style>
      <ul class="fluent-menu"><slot></slot></ul>
    `
  }
}

export const FluentMenu = createUniversalComponent({
  tag: 'fluent-menu',
  class: FluentMenuInternal
})

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