<!--
    Component: Line
    Renders a line of text in the SliderArea
-->
<script lang="ts">
import type { Snippet } from 'svelte';
import { comparisonStore } from '../../model';

interface Props {
    /**
     * Line text
     */
    text: string;
    /**
     * DOM element reference
     */
    element?: HTMLElement;
    /**
     * Character render snippet
     */
    character: Snippet<[{ char: string; index: number }]>;
}
const typography = $derived(comparisonStore.typography);

let { text, element = $bindable<HTMLElement>(), character }: Props = $props();

const characters = $derived(text.split(''));
</script>

<div
    bind:this={element}
    class="relative flex w-full justify-center items-center whitespace-nowrap"
    style:height="{typography.height}em"
    style:line-height="{typography.height}em"
>
    {#each characters as char, index}
        {@render character?.({ char, index })}
    {/each}
</div>
