import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
import { prisma } from "@repo/db";
import { Error } from "_components/Error";
import { ReportAdmin, ReportSenderInfo } from "(app)/admin/report/_components/form";

export default async function Page({ params }: { params: Promise<{ id: string }> }) {
	const { id } = await params;

	const report = await prisma.report.findUnique({
		where: {
			id: Number(id),
		},
		include: {
			Reported: true,
			Reviewer: true,
			Sender: true,
		},
	});

	if (!report) return <Error statusCode={404} title="User not found" />;

	return (
		<div className="grid grid-cols-6 gap-4">
			<div className="col-span-full">
				<p className="text-2xl font-semibold text-left flex items-center gap-2">
					<ExclamationTriangleIcon className="w-5 h-5" />
					Report #{report.id}
				</p>
			</div>
			<div className="card bg-base-200 shadow-xl mb-4 col-span-6 xl:col-span-3">
				<ReportSenderInfo report={report} />
			</div>
			<div className="card bg-base-200 shadow-xl mb-4 col-span-6 xl:col-span-3">
				<ReportAdmin report={report} />
			</div>
		</div>
	);
}
