<script lang="ts">
    import Mark from "../mark.svelte";
    import AddButton from "../add_button.svelte";

    let { value = $bindable([]), label = "" } = $props();
    let items: string[] = $state([]);
</script>

<div class="marks-container input rounded">
    <p>{label}</p>

    {#each items as item}
        <Mark text={item}/>
    {/each}
    <AddButton handler={() => {
        items.push("");
        value = items;
    }} />
    
</div>

<style>
    /* Горизонтальный список */
    .marks-container {
        display: flex;
        overflow-x: scroll;
        align-content: center;
        padding: 0.5rem;
    }

    .marks-container :global(*) {
        margin: 0;
        margin-right: 0.5rem;
    }

    .marks-container p {
        align-content: center;
    }
</style>