<script lang="ts">
    import Spinner from "../Spinner.svelte";
    import { twMerge } from "tailwind-merge";

    /** @description Disallow clicking and reduce opacity **/
    export let disabled = false;
    /** @description Show a loading spinner **/
    export let loading = false;
</script>

<button
    on:click
    {...$$restProps}
    disabled={disabled || loading}
    class:opacity-50={disabled || loading}
    class:cursor-not-allowed={disabled || loading}
    class={twMerge(
        "relative rounded-md border-2 border-contrast-200 bg-primary-300 px-4 py-2 transition-colors hover:border-contrast-900 dark:border-contrast-100 dark:hover:border-accent",
        $$restProps["class"]
    )}
>
    <span class:opacity-0={loading}>
        <slot />
    </span>
    {#if loading}
        <span class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
            <Spinner class="h-6" />
        </span>
    {/if}
</button>
