<style lang="scss">
    @import "../../style/atoms/site-title";
</style>

<script lang="ts">
    import SplitText from '$components/SplitText.svelte'
    import reveal from '$animations/reveal'
    import { DURATION } from '$utils/contants'

    export let variant: string = 'lines'
    export let tag: string = 'h1'
</script>

{#if tag === 'h1'}
    <h1 class="site-title site-title--{variant}"
        use:reveal={{
            children: '.char',
            animation: { y: ['105%', 0] },
            options: {
                stagger: 0.04,
                duration: 1,
                delay: DURATION.PAGE_IN / 1000,
                threshold: 0,
            },
        }}
    >
        <SplitText text="Houses" mode="chars" class="pink mask" />
        <SplitText text="Of The" mode="chars" class="middle mask" />
        <SplitText text="World" mode="chars" class="pink mask" />
    </h1>
{:else}
    <div class="site-title site-title--{variant}">
        <span class="word-1">Houses</span>
        <span class="middle word-2">Of The</span>
        <span class="word-3">World</span>
    </div>
{/if}