<template>
	<div :class="$style.subcategory">
		<div :class="$style.details">
			<div :class="$style.title">
				{{ $baseText(`nodeCreator.subcategoryNames.${subcategoryName}`) }}
			</div>
			<div v-if="item.properties.description" :class="$style.description">
				{{ $baseText(`nodeCreator.subcategoryDescriptions.${subcategoryDescription}`) }}
			</div>
		</div>
		<div :class="$style.action">
			<font-awesome-icon :class="$style.arrow" icon="arrow-right" />
		</div>
	</div>
</template>

<script lang="ts">
import camelcase from 'lodash.camelcase';
import { renderText } from '@/components/mixins/renderText';
import mixins from 'vue-typed-mixins';

export default mixins(renderText).extend({
	props: ['item'],
	computed: {
		subcategoryName() {
			return camelcase(this.item.properties.subcategory);
		},
		subcategoryDescription() {
			const firstWord = this.item.properties.description.split(' ').shift() || '';
			return firstWord.toLowerCase().replace(/,/g, '');
		},
	},
});
</script>


<style lang="scss" module>
.subcategory {
	display: flex;
	padding: 11px 16px 11px 30px;
}

.details {
	flex-grow: 1;
	margin-right: 4px;
}

.title {
	font-size: 14px;
	font-weight: bold;
	line-height: 16px;
	margin-bottom: 3px;
}

.description {
	font-size: 11px;
	line-height: 16px;
	font-weight: 400;
	color: $--node-creator-description-color;
}

.action {
	display: flex;
	align-items: center;
}

.arrow {
	font-size: 12px;
	width: 12px;
	color: $--node-creator-arrow-color;
}

</style>