import React from "react";

type Props = {
  icon: React.ReactNode;
  title: string;
  subtitle: string;
  amount: string;
  tag: string;
  tagColor?: "green" | "purple" | "blue";
  footer: string;
};

const PaymentCard = ({
  icon,
  title,
  subtitle,
  amount,
  tag,
  tagColor = "green", // ✅ now allowed
  footer,
}: Props) => {
  const tagStyles = {
    green: "bg-emerald-50 text-emerald-600",
    purple: "bg-purple-50 text-purple-600",
    blue: "bg-blue-50 text-blue-600",
  };
  const iconStyles = {
    green: "bg-emerald-100 text-emerald-700",
    purple: "bg-purple-100 text-purple-700",
    blue: "bg-blue-100 text-blue-700",
  };

  return (
    <div className="w-full rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">

      {/* Top Row */}
      <div className="flex items-center justify-between">
        <div
          className={`w-10 h-10 rounded-lg flex items-center justify-center ${iconStyles[tagColor]}`}
        >
          {icon}
        </div>

        <span
          className={`text-[10px] font-bold px-3 py-1 rounded-full ${tagStyles[tagColor]}`}
        >
          {tag}
        </span>
      </div>

      {/* Title */}
      <label className="mt-4 text-sm font-bold text-slate-900">
        {title}
      </label>

      {/* Subtitle */}
      <p className="text-xs text-slate-400">
        {subtitle}
      </p>

      {/* Amount Row */}
      <div className="mt-3 flex items-center gap-2">
        <span className="text-lg font-bold text-slate-900">
          {amount}
        </span>
        <span className="text-[10px] text-slate-400">
          {footer}
        </span>
      </div>
    </div>
  );
};

export default PaymentCard;