<script setup lang="ts">
import type { SanitisedTicketComment } from "@stealth-developers/api";

import UserChip from "@/components/UserChip.vue";

defineProps<{
	comments: SanitisedTicketComment[];
}>();
</script>

<template>
	<div class="ticket-comments" v-if="comments.length > 0">
		<h2>Comments</h2>
		<div class="comments-list">
			<div v-for="comment in comments" :key="comment.id" class="comment">
				<UserChip :user="comment.actors?.author" />
				<p class="comment-text">{{ comment.content }}</p>
			</div>
		</div>
	</div>
</template>

<style scoped>
.ticket-comments {
	display: flex;
	flex-direction: column;
	background-color: hsl(var(--crust));
	border-radius: 1.5rem;
	overflow: hidden;
	margin-bottom: 0.5rem;

	h2 {
		padding: 0.5rem 1rem;
		font-size: 1.5rem;
		font-weight: 800;
		color: hsl(var(--text));
	}

	.comments-list {
		display: flex;
		flex-direction: column;
		background-color: hsl(var(--crust));

		.comment {
			display: flex;
			flex-direction: column;
			gap: 0.75rem;
			padding: 0.5rem 1rem;

			&:hover {
				background-color: hsla(var(--surface0) / 0.25);
				transition: none;
			}
		}
	}
}
</style>