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

class FluentTitleInternal extends FluentComponent {
  static tag = 'fluent-title'

  static override get observedAttributes() {
    return ['level']
  }

  render() {
    const level = Number(this.getAttribute('level') || '2')
    const tag = `h${Math.min(6, Math.max(1, level))}`
    this.shadowRootRef.innerHTML = `<${tag} class="ttl"><slot></slot></${tag}>`
  }

  constructor() {
    super()
    this.recipe = { base: { display: 'block' }, selectors: { '.ttl': { fontWeight: '800', margin: '0.5rem 0' } } }
  }
}

export const FluentTitle = createUniversalComponent({
  tag: 'fluent-title',
  class: FluentTitleInternal
})

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