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

	export let data: PageData;
</script>

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

<div class="absolute top-12 grid card w-11/12 xl:w-2/3 2xl:w-1/2 p-6 shadow-lg">
	{#if data.draft}
		<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 ?? []}
				on:submit={() => (data.draft = false)}
			/>
		</div>
	{:else if data.status === 'reviewed'}
		<ReportCompleted />
	{:else}
		<div class="col-[1] row-[1]" transition:fly={{ x: 200, duration: 300 }}>
			<ReportSubmitted />
		</div>
	{/if}
</div>
