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

class FluentSpinnerInternal extends FluentComponent {
  static tag = 'fluent-spinner'

  render() {
    this.shadowRootRef.innerHTML = `
      <style>
        :host { display: inline-block; }
        .fluent-spinner { width: 24px; height: 24px; border: 3px solid var(--fluent-color-neutral-300); border-top: 3px solid var(--fluent-color-primary-500); border-radius: 50%; animation: spin 0.8s linear infinite; }
        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
      </style>
      <div class="fluent-spinner" part="spinner"></div>
    `
  }
}

export const FluentSpinner = createUniversalComponent({
  tag: 'fluent-spinner',
  class: FluentSpinnerInternal
})

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