<template>
	<fragment>
		<div :class="badgeClass">
			<div class="wcc-badge-content">{{ title }}</div>
			<slot></slot>
		</div>
	</fragment>
</template>

<script>
import { Fragment } from "vue-frag";

export default {
	name: "Badge",
	components: {
		Fragment,
	},
	props: {
		type: {
			type: String,
			default: "success",
		},
		title: {
			type: String,
			default: "",
		},
	},
	computed: {
		/**
		 * Get badge classes based of different conditions.
		 *
		 * @since 3.0.0
		 *
		 * @return {*}
		 */
		badgeClass() {
			return {
				"wcc-badge": true,
				"wcc-badge-info": this.type === "info",
				"wcc-badge-error": this.type === "error",
				"wcc-badge-success": this.type === "success",
				"wcc-badge-warning": this.type === "warning",
			};
		},
	},
};
</script>