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

class FluentSkeletonInternal extends FluentComponent {
  static tag = 'fluent-skeleton'

  static override get observedAttributes() {
    return ['width', 'height']
  }

  render() {
    const w = this.getAttribute('width') || '100%'
    const h = this.getAttribute('height') || '1rem'
    this.shadowRootRef.innerHTML = `
      <style>
        :host { display: inline-block; }
        .fluent-skeleton { border-radius: 0.5rem; background: linear-gradient(90deg, var(--fluent-color-neutral-200), var(--fluent-color-neutral-300), var(--fluent-color-neutral-200)); }
      </style>
      <div class="fluent-skeleton" part="skeleton" style="width:${w};height:${h}"></div>
    `
  }
}

export const FluentSkeleton = createUniversalComponent({
  tag: 'fluent-skeleton',
  class: FluentSkeletonInternal
})

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