<script lang="ts">
	import { fly } from 'svelte/transition';
	import ReportDraft from './ReportDraft.svelte';
	import ReportCompleted from './ReportCompleted.svelte';
	import ReportSubmitted from './ReportSubmitted.svelte';

	let { data } = $props();

	let completed = $state(!data.draft);
</script>

<svelte:head>
	<title>Report</title>
	<!-- just in case... -->
	<meta name="robots" content="noindex" />
</svelte:head>

<div class="mt-12 grid card w-11/12 xl:w-2/3 2xl:w-1/2 p-6 shadow-lg">
	{#if !completed}
		<div class="col-[1] row-[1]" transition:fly={{ x: -200, duration: 300 }}>
			<ReportDraft
				reason={data.reason}
				reporterName={data.reporter.name}
				reportedName={data.reported.name ?? undefined}
				users={data.users ?? []}
				onsubmit={() => (completed = true)}
			/>
		</div>
	{:else if data.status === 'reviewed'}
		<ReportCompleted />
	{:else}
		<div class="col-[1] row-[1]" transition:fly={{ x: 200, duration: 300 }}>
			<ReportSubmitted />
		</div>
	{/if}
</div>
