import { groupEventsByDate } from "@/common/utils";
import { EventList } from "@/components/EventList";
import { getEventsForLine, getLineById } from "@/db";
import { notFound } from "next/navigation";

export default async function ScheduleByLine({
	params,
}: {
	params: Promise<{
		line: string;
	}>;
}) {
	const { line } = await params;
	const lineId = parseInt(line, 10);
	if (Number.isNaN(lineId)) {
		return notFound();
	}
	const lineInfo = await getLineById(lineId);
	if (!lineInfo) {
		return notFound();
	}
	const events = await getEventsForLine(lineId);
	const lineData = groupEventsByDate(events);

	return (
		<div className="flex flex-col items-center justify-items-center p-8 pb-20 gap-4 sm:p-20 w-full">
			<div className="flex flex-col items-center text-center">
				<h1 className="text-3xl font-bold mb-4">{lineInfo.name}</h1>
				<h6 className="text-gray-500 mb-4">{lineInfo.description}</h6>
			</div>
			<main className="flex flex-col gap-8 items-center">
				{lineData?.map((day) => (
					<EventList
						key={day.date.toUTCString()}
						events={day.events}
						title={day.date.toLocaleDateString(["cs-CZ"], {
							weekday: "long",
							day: "numeric",
							month: "numeric",
						})}
					/>
				))}
			</main>
		</div>
	);
}