import { formatCents } from "@/lib/drinkkaart";

interface TopupRow {
	id: string;
	type: "payment" | "admin_credit";
	amountCents: number;
	balanceBefore: number;
	balanceAfter: number;
	reason: string | null;
	paidAt: Date;
}

interface TopUpHistoryProps {
	topups: TopupRow[];
}

export function TopUpHistory({ topups }: TopUpHistoryProps) {
	if (topups.length === 0) {
		return <p className="text-sm text-white/40">Nog geen opladingen.</p>;
	}

	return (
		<ul className="space-y-2">
			{topups.map((t) => {
				const date = new Date(t.paidAt).toLocaleDateString("nl-BE", {
					day: "numeric",
					month: "short",
					year: "numeric",
				});

				return (
					<li
						key={t.id}
						className="flex items-start justify-between rounded-lg border border-white/10 bg-white/5 px-4 py-3"
					>
						<div>
							<div className="flex items-center gap-2">
								<span className="font-medium text-green-400">
									+ {formatCents(t.amountCents)}
								</span>
								{t.type === "admin_credit" && (
									<span className="rounded-full border border-yellow-400/30 bg-yellow-400/10 px-2 py-0.5 text-xs text-yellow-300">
										Admin credit
									</span>
								)}
							</div>
							{t.reason && (
								<p className="mt-0.5 text-white/50 text-xs">{t.reason}</p>
							)}
						</div>
						<span className="text-sm text-white/50 tabular-nums">{date}</span>
					</li>
				);
			})}
		</ul>
	);
}
