<template>
    <span
        class="inline-flex items-center gap-2 whitespace-nowrap max-w-[300px] line-clamp-1 select-none"
        :class="[colors[color], rounded, sizes[size]]"
    >
        <slot></slot>
        <button
            v-if="dismissable"
            aria-label="Remove"
            class="inline-flex items-center p-0.5 text-sm bg-transparent rounded-sm"
            data-dismiss-target="#badge-dismiss"
            type="button"
        >
            <svg
                aria-hidden="true"
                class="w-3.5 h-3.5"
                fill="currentColor"
                viewBox="0 0 20 20"
                xmlns="http://www.w3.org/2000/svg"
            >
                <path
                    clip-rule="evenodd"
                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                    fill-rule="evenodd"
                ></path>
            </svg>
            <span class="sr-only">Remove badge</span>
        </button>
    </span>
</template>

<script>
export default {
    name: "Badge",
    props: {
        color: {
            type: String,
            default: "blue",
        },
        rounded: {
            type: String,
            default: "rounded-full",
        },
        size: {
            type: String,
            default: "sm",
        },
        dismissable: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            colors: {
                blue: "bg-blue-200 text-blue-300 border border-blue-200",
                green: "bg-green-300 text-white border border-blue-200",
                red: "bg-red-300 text-white border border-blue-200",
                orange: "bg-orange-300 text-white border border-blue-200",
                black: "bg-black text-white border border-blue-200",
                gray: "bg-gray-200 text-white border border-blue-200",
            },
            sizes: {
                sm: "text-xs px-2.5 py-0.5",
                md: "text-base px-2.5 py-1",
                lg: "text-lg",
                fits: "text-sm text-center w-fit 	  p-1  px-2.5	",
            },
        };
    },
};
</script>
