<template>
	<div
		class="task-label"
		:style="labelStyle"
	>
		<w-icon
			v-if="value.icon"
			class="task-label__icon"
		>
			{{ value.icon }}
		</w-icon>
		{{ value.title }}
		<VindiSpacer />
		<slot />
	</div>
</template>

<script lang="ts">
import Vue from 'vue';
import { expectProp, isColorDark } from '~/src/helpers';

export default Vue.extend({
	props: {
		value: {
			type: Object,
			required: true,
			validator: expectProp(['id', 'title'])
		}
	},

	computed: {
		textColor(): string {
			return this.value.color && isColorDark(this.value.color) ? '#fff' : '#000';
		},
		labelStyle(): any {
			return {
				color: this.textColor,
				backgroundColor: this.value.color
			};
		}
	}
});
</script>

<style lang="scss">
.task-label {
	@include font-size(xs);
	@include rounded(md);
	@include padding(1.5, x);
	@include padding(1, y);
	@include truncate;

	background-color: var(--color-shade-4);
	display: flex;

	@include dark {
		background-color: var(--color-shade-4);
		color: white !important;
	}

	> .w-icon {
		@include font-size(base);
	}

	&__icon {
		@include margin(1, r);
	}
}
</style>