<script lang="ts">
	import type { Comment } from '../guestbook.svelte';
	export let comment: Comment;

	function toLink(s: string) {
		if (s.startsWith("http")) {
			return s;
		} 
		return "https://" + s;
	}
</script>

<div class="rounded bg-red-100 dark:bg-slate-800 dark:ring-2 dark:ring-slate-400 mt-2 break-words">
	<div class="rounded-t bg-slate-400 dark:bg-slate-700 grid grid-cols-2 gap-1 min-h-fit  px-3 py-1">
		<p class="text-xs">Author: {comment.name}</p>
		<p class="text-xs text-right">
			Time:
			{#if comment.time != null}
				{new Date(comment.time).toLocaleString('en-US', {dateStyle: 'long', timeStyle: 'short'})}
			{:else}
				brokn
			{/if}
		</p>
		{#if comment.website != null}
			<p class="text-xs col-span-2">Site: <a href="{toLink(comment.website)}">{comment.website}</a></p>
		{/if}
	</div>
	<div class="px-3 py-2">
		<p class="">{comment.message}</p>
	</div>
</div>
