export class ScrollManager {
  private scrollableContent!: HTMLElement;
  private timeAxisContent!: HTMLElement;
  private calendarHeader!: HTMLElement;

  init(container: HTMLElement): void {
    this.scrollableContent = container.querySelector('swp-scrollable-content')!;
    this.timeAxisContent = container.querySelector('swp-time-axis-content')!;
    this.calendarHeader = container.querySelector('swp-calendar-header')!;

    this.scrollableContent.addEventListener('scroll', () => this.onScroll());
  }

  private onScroll(): void {
    const { scrollTop, scrollLeft } = this.scrollableContent;

    // Synkroniser time-axis vertikalt
    this.timeAxisContent.style.transform = `translateY(-${scrollTop}px)`;

    // Synkroniser header horisontalt
    this.calendarHeader.style.transform = `translateX(-${scrollLeft}px)`;
  }
}