---
import type { DiscordMessage } from "@/types";

interface Props {
	message: DiscordMessage;
}

const { message } = Astro.props;
---

<div class="message-group">
	<div class="gutter">
		<img src={message.avatarUrl} alt="" aria-hidden="true" />
	</div>
	<div class="message-content">
		<div class="message-author">
			<span class="author-name">{message.author}</span>
			<span class="timestamp">{message.timestamp}</span>
		</div>
		<div class="message-text">
			{message.content.map((content) => <p>{content}</p>)}
		</div>
	</div>
</div>

<style>
	.message-group {
		display: flex;
		flex-direction: row;
		gap: 0.5rem;

		padding: 0.5rem;
		background-color: hsl(var(--surface0));
		border-radius: 1.5rem;

		.gutter {
			width: 2rem;
			img {
				width: 100%;
				height: auto;
				border-radius: 50%;
			}
		}

		.message-content {
			flex: 1;

			.message-author {
				display: flex;
				align-items: center;
				gap: 0.5rem;
				.author-name {
					font-weight: bold;
				}
				.timestamp {
					font-size: 0.75rem;
					color: hsl(var(--subtext0));
				}
			}

			.message-text {
				font-size: 0.875rem;
				line-height: 1.5;
				color: hsl(var(--text));
			}
		}
	}
</style>