<template>
	<div class="message-bubble">
		<div class="avatar-container">
			<img :src="avatar" :alt="name" class="avatar" />
		</div>
		<div class="bubble-container">
			<div class="bubble">
				<div class="bubble-header">
					<span class="name">{{ name }}</span>
					<span class="meta">{{ time }} · {{ source }}</span>
				</div>
				<div class="bubble-content">
					{{ content }}
				</div>
				<div class="triangle"></div>
			</div>
		</div>
	</div>
</template>

<script setup>
defineProps({
	avatar: {
		type: String,
		default: "https://via.placeholder.com/40x40/4A90E2/FFFFFF?text=T"
	},
	name: {
		type: String,
		default: "唐纳德·特朗普"
	},
	time: {
		type: String,
		default: "15:23"
	},
	source: {
		type: String,
		default: "发布于真实社交"
	},
	content: {
		type: String,
		default:
			"埃隆·马斯克在强力支持我竞选总统之前，早就知道我强烈反对‘电动汽车强制令’。这太荒谬了，这一直是我竞选活动的主要部分。电动汽车没问题，但不应该强迫每个人都拥有一辆。埃隆获得的补贴可能远远超过历史上任何一个人。如果没有补贴，埃隆可能不得不关门大吉，回到南非老家。"
	}
});
</script>

<style scoped>
.message-bubble {
	display: flex;
	max-width: 720px;
	margin-top: 5px;
	margin-bottom: 16px;
}

.avatar-container {
	flex-shrink: 0;
	margin-right: 12px;
}

.avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

.bubble-container {
	flex: 1;
	position: relative;
}

.bubble {
	background-color: rgba(246, 250, 255, 1);
	border-radius: 12px;
	padding: 10px 16px;
	position: relative;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bubble-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 5px;
}

.name {
	color: rgba(59, 65, 75, 1);
	font-family: Microsoft YaHei;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 1px;
	text-align: left;
}

.meta {
	color: rgba(95, 101, 108, 1);
	font-family: Microsoft YaHei;
	font-size: 16px;
	font-weight: 400;
	line-height: 30px;
	letter-spacing: 0px;
	text-align: right;
}

.bubble-content {
	color: rgba(59, 65, 75, 1);
	font-family: Microsoft YaHei;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0px;
	text-align: justify;
}

.triangle {
	position: absolute;
	left: -8px;
	top: 15px;
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-right: 8px solid rgba(246, 250, 255, 1);
}

/* 响应式设计 */
@media (max-width: 768px) {
	.message-bubble {
		max-width: 100%;
	}

	.bubble-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.meta {
		margin-top: 4px;
	}
}
</style>
