<template>
	<div class="wcc-nav-tab-content" v-show="isActive">
		<slot></slot>
	</div>
</template>
<script>
export default {
	name: "NavTab",
	props: {
		title: {
			type: String,
			required: true,
		},
		subTitle: {
			type: String,
			default: "",
		},
		selected: {
			type: Boolean,
			default: false,
		},
		icon: {
			type: [Boolean, String],
			default: false,
		},
		meta: {
			type: [Array, String, Object],
			default: () => ({}),
		},
		dataTestId: {
			type: String,
			default: "",
		},
	},
	data() {
		return {
			isActive: false,
			iconClass: "",
		};
	},
	computed: {
		href() {
			return "#" + this.title.toLowerCase().replace(/ /g, "-");
		},
	},
	mounted() {
		this.isActive = this.selected;
		this.iconClass = this.icon;
	},
};
</script>