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

class FluentPaginationInternal extends FluentComponent {
  static tag = 'fluent-pagination'

  static override get observedAttributes() {
    return ['page', 'pages']
  }

  render() {
    const page = Number(this.getAttribute('page') || '1')
    const pages = Number(this.getAttribute('pages') || '1')
    this.shadowRootRef.innerHTML = `
      <style>
        :host { display: inline-block; }
        .fluent-pagination { display: inline-flex; gap: 0.5rem; align-items: center; }
      </style>
      <div class="fluent-pagination">
        <button class="prev" ${page <= 1 ? 'disabled' : ''}>Prev</button>
        <span class="info">${page} / ${pages}</span>
        <button class="next" ${page >= pages ? 'disabled' : ''}>Next</button>
      </div>
    `
  }
}

export const FluentPagination = createUniversalComponent({
  tag: 'fluent-pagination',
  class: FluentPaginationInternal
})

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