import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import { ScrollbarSyncDirective } from './directives/scrollbar-sync.directive';

/**
 * Custom horizontal scrollbar that stays in sync with a scrollable element.
 * Use when you need a sticky scrollbar (e.g. below the content) instead of the native one.
 *
 * Usage:
 *   - Give the scrollable element a template ref (e.g. #scrollableEl).
 *   - Pass it: [scrollableElement]="scrollableElRef?.nativeElement"
 *   - Optionally: [trackRightOffsetPx]="70" to shorten the track from the right.
 */
@Component({
    selector: 'app-ca-custom-horizontal-scrollbar',
    templateUrl: './ca-custom-horizontal-scrollbar.component.html',
    styleUrl: './ca-custom-horizontal-scrollbar.component.scss',
    imports: [ScrollbarSyncDirective],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CaCustomHorizontalScrollbarComponent {
    public scrollableElement = input<HTMLElement | null | undefined>();
    public trackRightOffsetPx = input<number>(0);
}