<script>
	import {IconNames} from "$shared/lib/configuration";
	import {createEventDispatcher} from "svelte";
	import Button from "./button.svelte";

	const dispatch = createEventDispatcher();
	export let removable = false;
	export let clickable = false;
	export let text = "";
	export let id = "";
	export let color = "";
	export let tabindex = "";

	function handle_remove() {
		if (removable) {
			dispatch("remove", {
				id
			});
		}
	}

	function handle_click() {
		if (clickable) {
			dispatch("clicked", {
				id
			});
		}
	}
</script>

<div class="chip break-word text-sm justify-between justify-start@md {clickable ? 'chip--interactive' : ''}"
     on:click={handle_click}
     id={id}
     style={color !== "" ? `background-color: ${color}15; border: 1px solid ${color}; color: ${color}` : ""}
     {tabindex}
>
    <span class="chip__label">{text}</span>

    {#if removable}
        <Button class="chip__btn"
                variant="reset"
                style="{color !== '' ? `background-color: ${color}45;` : ''}"
                {tabindex}
                icon="{IconNames.x}"
                icon_width="initial"
                icon_height="initial"
                on:click={handle_remove}
        />
    {/if}
</div>
