<template>
	<div class="comment-item-box flex border">
		<div class="comment-avatar flex-center">
			<img src="/logo/logo-rect.png" alt="" />
		</div>
		<div class="comment-content">
			<div class="comment-author">
				{{item.username || ''}}
			</div>
			<div class="date-wrap flex-top-left">
				<img src="/ToolDetail/icon_clock1.png" alt="" />
				<span class="line-h-18">{{ item.createdAt || '' }}</span>
			</div>
			<p class="comment-text">
				{{ item.content || '' }}
			</p>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
		}
	},
	props: {
		item: {
			type: Object,
			default: () => {
				return {}
			}
		}
	},
	methods: {
	}
}
</script>

<style scoped lang="scss">
.line-h-18 {
	line-height: 18px;
}
.comment-item-box {
	gap: 15px;
	padding: 30px 0;
	.comment-avatar {
		width: 36px;
		height: 36px;
		@include gradient-circle-border($linear-gradient-start, $linear-gradient-end);
		img {
			width: 24px;
			height: 24px;
		}
	}
	.comment-content {
		.comment-author {
			font-size: 18px;
			font-weight: 600;
			font-family: 'Poppins-SemiBold';
			color: #1E293B;
			line-height: 27px;
			height: 27px;
		}
		.date-wrap {
			gap: 8px;
			font-family: 'Poppins-Regular';
			font-size: 14px;
			color: #869EC2;
			margin-top: 3px;
			img {
				width: 16px;
				height: 16px;
			}
		}
		.comment-text {
			margin-bottom: 0;
			margin-top: 13px;
			font-family: 'Poppins-Regular';
			color: #64748B;
		}
	}
}
.border {
	border-bottom: 2px solid #f3f8fe;
}
</style>
