"use client";

import MDEditor from "@uiw/react-md-editor";
import Image from "next/image";

export type TimelineEntry = {
	id: number;
	title: string;
	text: string;
	previewImage?: string | null;
	createdAt: string;
};

const formatReleaseDate = (value: string) =>
	new Intl.DateTimeFormat("en-GB", {
		day: "2-digit",
		month: "short",
		year: "numeric",
	}).format(new Date(value));

export const ChangelogTimeline = ({ entries }: { entries: TimelineEntry[] }) => {
	if (!entries.length)
		return <p className="text-base-content/70">Es sind noch keine Changelog-Einträge vorhanden.</p>;

	return (
		<div className="relative mt-6 pl-6">
			<div className="bg-base-300 absolute bottom-0 left-2 top-0 w-px" aria-hidden />
			<div className="space-y-8">
				{entries.map((entry, idx) => (
					<article key={entry.id ?? `${entry.title}-${idx}`} className="relative pl-4">
						<div className="bg-primary ring-base-100 absolute -left-[9px] top-3 h-4 w-4 rounded-full ring-4" />
						<div className="bg-base-200/80 rounded-xl p-5 shadow">
							<div className="flex flex-col gap-1 text-left md:flex-row md:justify-between">
								<div>
									<h3 className="text-lg font-semibold leading-tight">{entry.title}</h3>
									<p className="text-base-content/60 text-sm">
										Release Date: {formatReleaseDate(entry.createdAt)}
									</p>
								</div>
								{entry.previewImage && (
									<div className="absolute right-5 top-5 md:pl-4">
										<Image
											src={entry.previewImage}
											width={300}
											height={300}
											alt={`${entry.title} preview`}
											className="mt-3 max-w-[300px] rounded-lg object-cover md:mt-0"
										/>
									</div>
								)}
							</div>

							<div className="text-base-content/80 text-left" data-color-mode="dark">
								<MDEditor.Markdown
									source={entry.text}
									style={{
										backgroundColor: "transparent",
										fontSize: "0.95rem",
									}}
								/>
							</div>
						</div>
					</article>
				))}
			</div>
		</div>
	);
};