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

    interface Props {
        onclick?: (event: MouseEvent) => void;
        disabled?: boolean;
        type?: "button" | "submit" | "reset";
        children?: Snippet;
    }
    const { children, ...rest }: Props = $props();
</script>

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

<style>
    button {
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        background: linear-gradient(-83deg, #3fb095, #49bd85);
        box-shadow: 0rem 0rem 0.5rem #182125;
        color: #eaffeb;
        border: none;
        cursor: pointer;
    }
    button:focus {
        outline: 2px solid #007bff;
    }
</style>
