<script lang="ts">
    import { ButtonType } from "$lib/IO/ButtonType.ts";
    import { onMount } from "svelte";

    export let href : string = "#";
    export let type : ButtonType = ButtonType.Primary;
    let cssName : string;

    const buttonTypeColors = {
        [ButtonType.Primary]: '--primary',
        [ButtonType.Secondary]: '--secondary',
        [ButtonType.Accent]: '--accent',
    };

    onMount(() => {
        cssName = buttonTypeColors[type];
    });
</script>

<a href={href} class="button" style="--button-color: var({cssName});">
    <div class="content">
        <slot name="content">
            Click Me!
        </slot>
    </div>
</a>

<style>
    .button {
        white-space: nowrap;
        border-radius: 6px;
        border: none;
        background-color: var(--button-color);
        text-decoration: none;

        transition: transform 100ms ease-in-out;
        transform: translate(0, 0);

        display: flex;
        justify-content: center;
        font-size: 1.5em;

        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.3);
        padding: 0.8em 4em;
    }

    .button:hover {
        transition: transform 100ms ease-in-out;
        transform: translate(0, -5px);

        cursor: pointer;

        filter: brightness(130%);
    }

    .content {
        width: 100%;
        height: 100%;

        color: var(--text1);

        display: flex;
        justify-content: center;
        align-content: center;
    }
</style>
