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

    interface Props {
        onclick?: (event: MouseEvent) => void;
        disabled?: boolean;
        type?: "button" | "submit" | "reset";
        style?: "normal" | "red" | "invisible";
        formaction?: string;
        children?: Snippet;
    }
    interface LinkProps {
        href: string;
        type: "link";
        style?: "normal" | "red";
        children?: Snippet;
    }
    const { children, type, style = "normal", ...rest }: Props | LinkProps = $props();
</script>

{#if type === "link"}
    <a {...rest} class="button {style}">
        {@render children?.()}
    </a>
{:else}
    <button class="button {style}" {type} {...rest}>
        {@render children?.()}
    </button>
{/if}

<style>
    .button {
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        box-shadow: 0rem 0rem 0.5rem #182125;
        color: #eaffeb;
        border: none;
        cursor: pointer;
        text-decoration: none;
        text-align: center;
    }
    .normal {
        background: linear-gradient(-83deg, #3fb095, #49bd85);
    }
    .red {
        background-color: #bd4949;
    }
    .invisible {
        background: none;
    }
    .button:focus {
        outline: 2px solid #007bff;
    }
    .button:disabled {
        background: linear-gradient(-18deg, #66697b, #4e4e5e);
        cursor: not-allowed;
    }
</style>
