---
/**
 * Carousel — a titled, sideways row of cards with previous and next buttons.
 * title: the label above the row; it names the region.
 * items: Card props, one card each. Or leave items out and fill the default
 *   slot with <li> elements, each holding a card.
 * prevLabel, nextLabel: the buttons' accessible names.
 * titleId: the title's id, unique on the page.
 * Behaviour (the script below): the buttons move the row one card; at
 * either end the button is disabled, and both hide when every card fits.
 */
import Card from './Card.astro';
interface Props {
  title: string; items?: Record<string, any>[];
  prevLabel?: string; nextLabel?: string; titleId?: string;
}
const { title, items, prevLabel = 'Previous', nextLabel = 'Next', titleId = 'carousel-title' } = Astro.props;
---
<section class="more-projects" aria-labelledby={titleId}>
  <div class="wrap more-head">
    <p class="eyebrow" id={titleId}>{title}</p>
    <div class="more-controls">
      <button class="more-btn is-prev" type="button" data-dir="-1" aria-label={prevLabel}><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M3 8h10M9 4l4 4-4 4"/></svg></button>
      <button class="more-btn is-next" type="button" data-dir="1" aria-label={nextLabel}><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M3 8h10M9 4l4 4-4 4"/></svg></button>
    </div>
  </div>
  <div class="wrap">
    <ul class="more-track">
      {items ? items.map((c) => <li><Card {...(c as any)} /></li>) : <slot />}
    </ul>
  </div>
</section>

<script>
  document.querySelectorAll<HTMLElement>('.more-projects').forEach((section) => {
    const track = section.querySelector<HTMLElement>('.more-track');
    if (!track) return;
    const controls = section.querySelector<HTMLElement>('.more-controls');
    const buttons = [...section.querySelectorAll<HTMLButtonElement>('.more-btn')];
    // one card and the gap after it
    const step = () => {
      const card = track.querySelector('li');
      return card ? card.getBoundingClientRect().width + parseFloat(getComputedStyle(track).columnGap || '0') : track.clientWidth * 0.8;
    };
    const sync = () => {
      const overflow = track.scrollWidth - track.clientWidth;
      if (controls) controls.hidden = overflow < 8;
      const x = track.scrollLeft;
      buttons.forEach((b) => {
        const dir = Number(b.dataset.dir);
        b.disabled = dir < 0 ? x < 8 : x > overflow - 8;
      });
    };
    buttons.forEach((b) => b.addEventListener('click', () => {
      track.scrollBy({ left: Number(b.dataset.dir) * step(), behavior: 'smooth' });
    }));
    track.addEventListener('scroll', sync, { passive: true });
    window.addEventListener('resize', sync);
    sync();
  });
</script>