<script lang="ts">
    interface Props {
        label: string;
        plus: (label: string) => void;
        minus: (label: string) => void;
        showPlus?: boolean;
        showMinus?: boolean;
        [key: string]: unknown;
    }

    let { label, plus, minus, showPlus = true, showMinus = true }: Props = $props();
</script>

<div class="specialBtn flex w-min gap-2 text-2xl">
    {#if showMinus}
        <button class="innerBtn" onclick={() => minus(label)}>-</button>
    {/if}
    <div class="whitespace-nowrap">
        {label}
    </div>
    {#if showPlus}
        <button class="innerBtn" onclick={() => plus(label)}>+</button>
    {/if}
</div>

<style>
    .specialBtn {
        border: 1px solid black;
        border-radius: 5px;
        padding: 4px;
        height: fit-content;
        align-items: center;
    }
    .innerBtn {
        width: 30px;
        border-radius: 5px;
        padding: 4px;
    }
    .innerBtn:hover {
        background-color: rgba(0, 0, 0, 0.1);
        cursor: pointer;
    }
</style>
