<script lang="ts">
	import { Rating as FbRating } from 'flowbite-svelte';
	import UserDisplay from '../UserDisplay.svelte';
	interface Rating {
		rating: number;
		comment: string;
		outdated?: boolean;
		user?: {
			name: string | null;
			image: string | null;
		};
	}
	let { rating }: { rating: Rating } = $props();
</script>

<div
	class="w-full bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-700 shadow-md flex flex-col items-start p-5 gap-5"
>
	{#if rating.user}
		<UserDisplay user={rating.user} />
	{/if}
	{#if rating.outdated}
		<span class="self-end">i</span>
	{/if}

	<p class="text-left">{rating.comment}</p>

	{#if rating.rating}
		<FbRating id="example-1b" total={5} size={30} rating={rating.rating} class="self-end mt-auto" />
	{/if}
</div>
