<template>
    <TagsInputRoot v-model="model" addOnPaste class="flex gap-2 items-center border p-2 w-full flex-wrap border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10" >
        <TagsInputItem v-for="item in model" :key="item" :value="item" class="text-light-100 dark:text-dark-100 flex items-center justify-center gap-2 bg-light-20 dark:bg-dark-20 hover:bg-light-35 dark:hover:bg-dark-35 p-1 border border-light-35 dark:border-dark-35">
            <TagsInputItemText class="text-sm pl-1" />
            <TagsInputItemDelete asChild>
                <Icon icon="radix-icons:cross-2" class="w-4 h-4 cursor-pointer" />
            </TagsInputItemDelete>
        </TagsInputItem>

        <TagsInputInput :placeholder="placeholder" class="text-sm focus:outline-none flex-1 rounded text-green9 bg-transparent placeholder:text-mauve9 px-1" />
    </TagsInputRoot>
</template>

<script setup lang="ts">
import { Icon } from '@iconify/vue/dist/iconify.js';

const { placeholder } = defineProps<{
    placeholder?: string
}>();
const model = defineModel<string[]>();
</script>