<script>
export default {
	props: {
		commentCount: {
			type: Number,
			default: 0,
		}
	},
	data() {
		return {
			isActive: false,
		}
	},
	methods: {
	}
}
</script>

<template>
	<div class="box flex flex-col items-center" :style="{background: !isActive && '#FFFFFF'}">
		<img :src="isActive ? '/ToolDetail/icon_comment_selected.png' : '/ToolDetail/icon_comment.png'" alt="" />
		<span :style="{color: isActive ? '#ffffffcc' : '#64748b'}">{{ commentCount }}</span>
	</div>
</template>

<style scoped lang="scss">
.box {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	box-shadow: 0 4px 6px 0 #0000000d;
	background: $header-backgroungd;
	padding: 5px;
	font-family: 'Poppins-Regular', serif;
	font-size: 12px;
	img {
		width: 20px;
		height: 20px;
	}
}
</style>
