<script lang="ts">
import type { Snippet } from 'svelte';

interface Props {
    fontA: { name: string; id: string };
    fontB: { name: string; id: string };
    sliderPos: number;
}
let { fontA, fontB, sliderPos }: Props = $props();
</script>

<!-- Bottom Labels -->
<div class="absolute bottom-6 inset-x-8 sm:inset-x-12 flex justify-between items-center pointer-events-none z-20">
    <!-- Left Label (Font A) -->
    <div
        class="flex flex-col gap-1 transition-opacity duration-300"
        style:opacity={sliderPos < 10 ? 0 : 1}
    >
        <span class="text-[0.5rem] font-mono uppercase tracking-widest text-indigo-400"
        >Baseline</span>
        <span class="text-xs sm:text-sm font-bold text-indigo-600">
            {fontB.name}
        </span>
    </div>

    <!-- Right Label (Font B) -->
    <div
        class="flex flex-col items-end text-right gap-1 transition-opacity duration-300"
        style:opacity={sliderPos > 90 ? 0 : 1}
    >
        <span class="text-[0.5rem] font-mono uppercase tracking-widest text-slate-400"
        >Comparison</span>
        <span class="text-xs sm:text-sm font-bold text-slate-900">
            {fontA.name}
        </span>
    </div>
</div>
