infoalloggi-monorepo/apps/infoalloggi/src/components/payment_status.tsx

import { AlertCircle, CheckCircle, Loader2 } from "lucide-react";

type PaymentStatus = "success" | "processing" | "error";

interface PaymentStatusProps {
	status: PaymentStatus;
	title: string;
	message?: string;
}

export default function PaymentStatus({
	status,
	message,
	title,
}: PaymentStatusProps) {
	const statusConfig = {
		error: {
			bgColor: "bg-red-50",
			borderColor: "border-red-200",
			color: "text-red-500",
			icon: AlertCircle,
		},
		processing: {
			bgColor: "bg-blue-50",
			borderColor: "border-blue-200",
			color: "text-blue-500",
			icon: Loader2,
		},
		success: {
			bgColor: "bg-green-50",
			borderColor: "border-green-200",
			color: "text-green-500",
			icon: CheckCircle,
		},
	};

	const { icon: Icon, color, bgColor, borderColor } = statusConfig[status];

	return (
		<div
			className={`mb-4 flex items-center rounded-lg border p-4 ${bgColor} ${borderColor}`}
		>
			<div
				className={`size-8 shrink-0 ${color} ${status === "processing" ? "animate-spin" : ""}`}
			>
				<Icon className="size-8" />
			</div>
			<div className="ml-3">
				<h3 className={`text-sm font-medium ${color}`}>{title}</h3>
				{message && <div className="mt-2 text-sm text-gray-700">{message}</div>}
			</div>
		</div>
	);
}