import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { getAllDays, getAllLines } from "@/db";

interface HomePageProps {
	searchParams: Promise<{ message?: string }>;
}

export default async function Home({ searchParams }: HomePageProps) {
	const lines = await getAllLines();
	const days = await getAllDays();

	const message = (await searchParams).message;
	console.log("Message from searchParams:", message);

	return (
		<div className="flex flex-col items-center justify-items-center p-8 pb-20 gap-4 sm:p-20 w-full">
			<main className="flex flex-col gap-[32px] w-full items-center sm:items-start">
				{message && (
					<Alert variant="default">
						<AlertTitle>Refetch all data - Response</AlertTitle>
						<AlertDescription>{message}</AlertDescription>
					</Alert>
				)}
				<section className="w-full">
					<ul className="list-disc pl-5">
						<li className="mb-2">
							<a href="/favorites" className="text-blue-600 hover:underline">
								Oblíbené
							</a>
						</li>
					</ul>
				</section>
				<section className="w-full">
					<h1 className="text-3xl font-bold mb-4">Dny</h1>
					<ul className="list-disc pl-5">
						{days.map((day) => (
							<li key={day} className="mb-2">
								<a
									href={`/day/${day}`}
									className="text-blue-600 hover:underline"
								>
									{new Date(day).toLocaleDateString("cs-CZ", {
										weekday: "long",
										day: "numeric",
										month: "numeric",
									})}
								</a>
							</li>
						))}
					</ul>
				</section>
				<section className="w-full">
					<h1 className="text-3xl font-bold mb-4">Linie</h1>
					<ul className="list-disc pl-5">
						{lines.map((line) => (
							<li key={line.id} className="mb-2">
								<a
									href={`/line/${line.id}`}
									className="text-blue-600 hover:underline"
								>
									{line.name}
								</a>
								<p className="text-gray-500">{line.description}</p>
							</li>
						))}
					</ul>
				</section>
			</main>
		</div>
	);
}