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

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

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

    const baseClasses =
        "inline-flex items-center justify-center px-6 py-4 bg-kv-blue text-kv-white kv-btn-text cursor-pointer transition-opacity hover:opacity-80 disabled:opacity-50 disabled:cursor-not-allowed kv-shadow-button border-4 border-black box-border focus:outline-none focus:ring-2 focus:ring-kv-yellow focus:ring-offset-2 focus:ring-offset-black";
</script>

{#if href && !disabled}
    <a
        {href}
        class="{baseClasses} {className}"
        data-sveltekit-reload={reload ? "" : undefined}
        aria-label={ariaLabel}
        role="button"
    >
        <span class="kv-shadow-text">{@render children()}</span>
    </a>
{:else}
    <button
        class="{baseClasses} {className}"
        {disabled}
        {onclick}
        aria-label={ariaLabel}
        aria-disabled={disabled}
    >
        <span class="kv-shadow-text">{@render children()}</span>
    </button>
{/if}
