<script lang="ts">
import { SetupFontMenu } from '$features/SetupFont';
import {
    Content as ItemContent,
    Root as ItemRoot,
} from '$shared/shadcn/ui/item';

import { displayedFontsStore } from '$features/DisplayFont';
import { cubicOut } from 'svelte/easing';
import { crossfade } from 'svelte/transition';

const [send, receive] = crossfade({
    duration: 400,
    easing: cubicOut,
    fallback(node, params) {
        // If it can't find a pair, it falls back to a simple fade/slide
        return {
            duration: 400,
            css: t => `opacity: ${t}; transform: translateY(${(1 - t) * 10}px);`,
        };
    },
});
</script>

{#if displayedFontsStore.hasAnyFonts}
    <div
        class="w-auto fixed bottom-5 left-1/2 translate-x-[-50%] max-w-max z-10"
        in:receive={{ key: 'panel' }}
        out:send={{ key: 'panel' }}
    >
        <ItemRoot variant="outline" class="w-auto max-w-max p-2.5 rounded-2xl backdrop-blur-lg">
            <ItemContent class="flex flex-row justify-center items-center max-w-max">
                <SetupFontMenu />
            </ItemContent>
        </ItemRoot>
    </div>
{/if}
