<script>
    import { Button } from '$lib/components';

    let { values = $bindable([]), onAdd = () => {} } = $props();
    let newValue = $state('');

    function onAddNewValue() {
        onAdd?.(newValue);
        newValue = '';
    }
</script>

<div class="chips-container">
    <form>
        <input bind:value={newValue} type="text" />
        <Button type="submit" onclick={onAddNewValue}>Add</Button>
    </form>
    <div class="chips">
        {#if values}
            {#each values as chip}
                <div class="chip">
                    <Button onclick={() => {
                        values = values.filter(value => value !== chip);
                    }}>{chip}</Button>
                </div>
            {/each}
        {/if}
    </div>
</div>

<style>
    .chips-container {
        display: grid;
        grid-gap: 10px;
    }

    .chips {
        display: flex;
        flex-flow: row wrap;
        gap: 10px;
    }

    .chip {
        color: white;

        background-color: #4b5563;
        border-radius: 10px;

        &:hover {
            background-color: #434b58;
        }
    }

    form {
        display: flex;
        gap: 10px;
    }
</style>