---
export interface Props {
  defaultPage?: number;
}

const { defaultPage = 1 } = Astro.props;
---

<div class="pagination" data-current={defaultPage}>
  <slot/>
</div>

<script>
  const pagination = document.querySelector('.pagination');
  const numbers = pagination?.querySelectorAll('.pagination-number');

  numbers?.forEach((el) => {
    if (
      !el.classList.contains('pagination-number__disabled') &&
      el.textContent?.trim() === pagination?.getAttribute('data-current')
    ) {
      el.classList.add('pagination-number__selected');
    }

    el.addEventListener('click', () => {
      if (el.classList.contains('pagination-number__disabled')) return;
      numbers.forEach(n => n.classList.remove('pagination-number__selected'));
      el.classList.add('pagination-number__selected');
      pagination?.setAttribute('data-current', el.textContent?.trim() ?? '');
    });
  });
</script>

<style lang="scss">
@use './pagination';
</style>