<script lang="ts">
	import type { ClassValue, HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";

    let { 
        a,
        color,
        inverted,
        Icon,
        children,
        extra,
        ...others
    }: {
        a?: boolean,
        color?: "primary" | "danger" | "success",
        inverted?: boolean,
        Icon?: any,
        extra?: ClassValue,
        children?: any
    } & HTMLButtonAttributes & HTMLAnchorAttributes = $props();

    const baseClasses = "block flex items-center text-sm px-4 py-2 cursor-pointer rounded transition-all duration-300 ease-in-out";
    
    const colors = {
        "normal": {
            "danger": "bg-red-500 hover:bg-red-600 text-white border border-transparent",
            "success": "bg-emerald-500 hover:bg-emerald-600 text-white border border-transparent",
            "primary": "bg-neutral-800 hover:bg-neutral-600 text-white border border-transparent",
        },
        "inverted": {
            "danger": "bg-white hover:bg-red-100 text-red-500 border border-red-500",
            "success": "bg-white hover:bg-emerald-100 text-emerald-500 border border-emerald-500",
            "primary": "bg-white hover:bg-neutral-100 text-neutral-800 border border-neutral-800",
        },
    };

    let colorClasses = $derived(colors[inverted ? "inverted" : "normal"][color ?? "primary"]);

    let fullClasses = $derived(baseClasses + " " + extra + " " + colorClasses);
</script>


{#if a}
    <a class={fullClasses} {...others}>
        {#if Icon}
            <Icon class={children ? "mr-2" : ""}></Icon>
        {/if}

        {@render children?.()}
    </a>
{:else}
    <button class={fullClasses} {...others}>
        {#if Icon}
            <Icon class={children ? "mr-2" : ""}></Icon>
        {/if}

        {@render children?.()}
    </button>
{/if}