<script lang="ts">
import { fontshareStore } from '$entities/Font/model/store/fontshareStore.svelte';
import type { UnifiedFont } from '$entities/Font/model/types/normalize';
import {
    Content as ItemContent,
    Root as ItemRoot,
    Title as ItemTitle,
} from '$shared/shadcn/ui/item';
import { VirtualList } from '$shared/ui';
/**
 * FontList
 *
 * Displays a virtualized list of fonts with loading, empty, and error states.
 * Uses unifiedFontStore from context for data, but can accept explicit fonts via props.
 */
interface FontListProps {
    /** Font items to display (defaults to filtered fonts from store) */
    fonts?: UnifiedFont[];
    /** Show loading state */
    loading?: boolean;
    /** Show empty state when no results */
    showEmpty?: boolean;
    /** Custom error message to display */
    errorMessage?: string;
}

let {
    fonts,
    loading,
    showEmpty = true,
    errorMessage,
}: FontListProps = $props();

// const fontshareStore = getFontshareContext();
</script>

{#each fontshareStore.fonts as font (font.id)}
    <ItemRoot>
        <ItemContent>
            <ItemTitle>{font.name}</ItemTitle>
            <span class="text-xs text-muted-foreground">
                {font.category} • {font.provider}
            </span>
        </ItemContent>
    </ItemRoot>
{/each}
