EpicNext-Cms/src/app/(site)/radio/giveaways/[id]/page.tsx

import Link from "next/link";
import { notFound } from "next/navigation";
import { getTranslations } from "next-intl/server";
import { ContentCard } from "@/components/public/ui";
import { prisma } from "@/lib/prisma";

export const revalidate = 300;

function formatDate(d: Date | null | undefined): string {
	return d ? d.toISOString().slice(0, 19).replace("T", " ") : "";
}

export default async function RadioGiveawayDetailPage({
	params,
}: {
	params: Promise<{ id: string }>;
}) {
	const { id } = await params;
	await getTranslations("pages.radioGiveaways");

	let giveawayId: bigint;
	try {
		giveawayId = BigInt(id);
	} catch {
		notFound();
	}

	const giveaway = await prisma.radioGiveaways
		.findUnique({ where: { id: giveawayId } })
		.catch(() => null);

	if (!giveaway) notFound();

	const active = giveaway.isActive ? "Active" : "Ended";
	const prizeStr =
		giveaway.prize ||
		(giveaway.prizeAmount > 0
			? `${giveaway.prizeAmount} ${giveaway.prizeCurrency || "credits"}`
			: null);

	return (
		<main style={{ display: "grid", gap: "1.5rem" }}>
			<p className="muted" style={{ margin: 0 }}>
				<Link href="/radio/giveaways">← Back to giveaways</Link>
			</p>

			<ContentCard
				icon="🎁"
				title={giveaway.title || `Giveaway #${giveaway.id}`}
				subtitle={active}
			>
				<table style={{ width: "100%" }}>
					<tbody>
						{giveaway.description ? (
							<tr>
								<th style={{ verticalAlign: "top", width: 120 }}>
									Description
								</th>
								<td>{giveaway.description}</td>
							</tr>
						) : null}
						{prizeStr ? (
							<tr>
								<th>Prize</th>
								<td>{prizeStr}</td>
							</tr>
						) : null}
						<tr>
							<th>Period</th>
							<td>
								{giveaway.startDate ? formatDate(giveaway.startDate) : "—"}
								{" — "}
								{giveaway.endDate ? formatDate(giveaway.endDate) : "ongoing"}
							</td>
						</tr>
						<tr>
							<th>Created</th>
							<td>
								{formatDate(giveaway.createdAt) || (
									<span className="muted">—</span>
								)}
							</td>
						</tr>
						<tr>
							<th>Updated</th>
							<td>
								{formatDate(giveaway.updatedAt) || (
									<span className="muted">—</span>
								)}
							</td>
						</tr>
					</tbody>
				</table>
			</ContentCard>
		</main>
	);
}