<script lang="ts">
	import Input from '$lib/components/Input/Input.svelte';
	import Textarea from '$lib/components/Input/Textarea.svelte';

	let {
		reporterName,
		reportedName,
		status,
		reason,
		body,
		statement
	}: {
		reporterName: string;
		reportedName: string | null;
		status: 'none' | 'review' | 'reviewed';
		reason: string;
		body: string;
		statement?: string;
	} = $props();
</script>

<div>
	<h2 class="text-3xl text-center">
		Report von <span class="underline">{reporterName}</span> gegen
		<span class="underline">{reportedName ?? 'unbekannt'}</span>
	</h2>
	<h4 class="text-xl text-center mt-1 mb-0">
		{#if status === 'none'}
			<span>Unbearbeitet</span>
		{:else if status === 'review'}
			<span>In Bearbeitung</span>
		{:else if status === 'reviewed'}
			<span>Bearbeitet</span>
		{/if}
		<span class="relative inline-flex h-3 w-3 ml-[1px]">
			{#if status === 'review'}
				<span
					class="animate-ping absolute inline-flex h-full w-full rounded-full bg-yellow-500 opacity-75"
				></span>
			{/if}
			<span
				class="relative inline-flex rounded-full h-3 w-3"
				class:bg-yellow-500={status === 'none' || status === 'review'}
				class:bg-green-500={status === 'reviewed'}
			></span>
		</span>
	</h4>
	<div class="my-4">
		<Input type="text" size="sm" value={reason} disabled={true} pickyWidth={false}>
			{#snippet label()}
				<span>Report Grund</span>
			{/snippet}
		</Input>
		<Textarea disabled={true} rows={4} value={body} label="Report Details" />
	</div>
	<div class="divider divider-vertical mb-1"></div>
	<Textarea disabled={true} rows={4} label="Admin Kommentar" value={statement} />
</div>
