<script lang="ts">
    import SplitText from '$components/SplitText.svelte'

    export let tag: string = 'a'
    export let text: string
    export let url: string = undefined
    export let color: string = undefined
    export let size: string = undefined
    export let effect: string = 'link-3d'
    export let disabled: boolean = undefined

    const className = 'button'
    const classes = [
        className,
        effect ? effect : undefined,
        ...[color, size].map(variant => variant && `${className}--${variant}`),
        $$props.class
    ].join(' ').trim()

    // Define external links
    let rel: string, target: string
    $: isExternal = /(http(s?)):\/\//i.test(url)
    $: rel = isExternal ? 'external noopener noreferrer' : null
    $: target = isExternal ? '_blank' : null
</script>

{#if tag === 'button'}
    <button class={classes} tabindex="0" {disabled} on:click>
        <slot />
        <SplitText {text} clone={true} />
    </button>
{:else if tag === 'a'}
    <a
        href={url} class={classes}
        {rel} {target}
        sveltekit:prefetch={url && isExternal ? null : true}
        sveltekit:noscroll={isExternal ? null : true}
        {disabled}
        tabindex="0"
        on:click
    >
        <slot />
        <SplitText {text} clone={true} />
    </a>
{/if}