<script lang="ts">
    import type { Snippet } from "svelte";

    interface Props {
        href?: string;
        disabled?: boolean;
        onclick?: () => void;
        children: Snippet;
        class?: string;
    }

    let {
        href,
        disabled = false,
        onclick,
        children,
        class: className = "",
    }: Props = $props();

    const baseClasses =
        "inline-flex items-center justify-center px-6 py-4 bg-kv-blue font-kv-body text-kv-white text-2xl uppercase cursor-pointer transition-opacity hover:opacity-80 disabled:opacity-50 disabled:cursor-not-allowed kv-shadow-button";
</script>

{#if href && !disabled}
    <a {href} class="{baseClasses} {className}">
        <span class="kv-shadow-text">{@render children()}</span>
    </a>
{:else}
    <button class="{baseClasses} {className}" {disabled} {onclick}>
        <span class="kv-shadow-text">{@render children()}</span>
    </button>
{/if}
