<!--
    Component: FontVirtualList
    - Renders a virtualized list of fonts
    - Handles font registration with the manager
-->
<script lang="ts" generics="T extends { id: string }">
import { VirtualList } from '$shared/ui';
import type { ComponentProps } from 'svelte';
import { appliedFontsManager } from '../../model';

interface Props extends Omit<ComponentProps<typeof VirtualList<T>>, 'onVisibleItemsChange'> {
    onVisibleItemsChange?: (items: T[]) => void;
}

let { items, children, onVisibleItemsChange, ...rest }: Props = $props();

function handleInternalVisibleChange(visibleItems: T[]) {
    // Auto-register fonts with the manager
    const slugs = visibleItems.map(item => item.id);
    appliedFontsManager.registerFonts(slugs);

    // Forward the call to any external listener
    onVisibleItemsChange?.(visibleItems);
}
</script>

<VirtualList
    {items}
    {...rest}
    onVisibleItemsChange={handleInternalVisibleChange}
>
    {#snippet children(scope)}
        {@render children(scope)}
    {/snippet}
</VirtualList>
