<script lang="ts">
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import type { Snippet } from 'svelte';
import { type UnifiedFont } from '../../model';

interface Props {
    /**
     * Object with information about font
     */
    font: UnifiedFont;
    /**
     * Is element fully visible
     */
    isFullyVisible: boolean;
    /**
     * Is element partially visible
     */
    isPartiallyVisible: boolean;
    /**
     * From 0 to 1
     */
    proximity: number;
    /**
     * Children snippet
     */
    children: Snippet<[font: UnifiedFont]>;
}

const { font, children }: Props = $props();
</script>

<div
    class={cn(
        'pb-1 will-change-transform transition-transform duration-200 ease-out',
        'hover:scale-[0.98]', // Simple CSS hover effect
    )}
>
    {@render children?.(font)}
</div>
