<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()
</script>

{#if tag === 'button'}
    <button class={classes} on:click disabled={disabled}>
        <slot />
        <SplitText {text} clone={true} />
    </button>
{:else if tag === 'a'}
    <a href={url} class={classes} on:click sveltekit:prefetch>
        <slot />
        <SplitText {text} clone={true} />
    </a>
{/if}