<template>
	<div :class="commentRootClass">
		<span class="comment__author">
			{{ dataSource.authorName }}
		</span>
		<div v-html="dataSource.content"></div>
	</div>
</template>
<script>
export default {
	name: "CommentItem",
	computed: {
		commentRootClass() {
			return {
				comment: true,
				"comment--response": !this.isParent,
			};
		},
	},
	props: {
		dataSource: {
			required: true,
		},
		isParent: {
			default: false,
			type: Boolean,
		},
	},
};
</script>
<style lang="scss" scoped>
.comment {
	background: $color-white--dark;
	border-radius: 4px;
	color: $color-text--light;
	font-size: 12px;
	margin-bottom: $padding-default/2;
	padding: $padding-default/2;
	position: relative;

	&--response {
		margin-right: $padding-default * 2;
	}

	&__author {
		color: $color-text;
		display: block;
		font-weight: bold;
	}

	p {
		margin: 0 auto;
		padding: 0;
	}
}

[data-lang="en"] {
	.comment {
		&--response {
			margin-left: $padding-default * 2;
			margin-right: 0;
		}
	}
}
</style>