import { CheckCircle, AlertCircle, 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 = {
    success: {
      icon: CheckCircle,
      color: "text-green-500",
      bgColor: "bg-green-50",
      borderColor: "border-green-200",
    },
    processing: {
      icon: Loader2,
      color: "text-blue-500",
      bgColor: "bg-blue-50",
      borderColor: "border-blue-200",
    },
    error: {
      icon: AlertCircle,
      color: "text-red-500",
      bgColor: "bg-red-50",
      borderColor: "border-red-200",
    },
  };

  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>
  );
}