<!--
    Component: Logo
    Project logo with apropriate styles
-->
<script lang="ts">
import { cn } from '$shared/shadcn/utils/shadcn-utils';

interface Props {
    class?: string;
}

const { class: className }: Props = $props();

const baseClasses = 'font-[Barlow] font-thin text-5xl sm:text-6xl md:text-7xl lg:text-8xl';

const title = 'GLYPHDIFF';
</script>

<!-- Firefox version (hidden in Chrome/Safari) -->
<h2
    class={cn(
        baseClasses,
        'text-justify [text-align-last:justify] [text-justify:inter-character]',
        // Hide in non-Firefox
        'hidden [@supports(text-justify:inter-character)]:block',
        className,
    )}
>
    {title}
</h2>

<!-- Chrome/Safari version (hidden in Firefox) -->
<h2
    class={cn(
        'flex justify-between w-full',
        baseClasses,
        // Hide in Firefox
        '[@supports(text-justify:inter-character)]:hidden',
        className,
    )}
>
    {#each title.split('') as letter}
        <span>{letter}</span>
    {/each}
</h2>
