import React from 'react';

interface SavingsCardProps {
  currency: string;
  amount: string;
  percentage: string;
  bgColor: string;
  textColor: string;
  metricTextColor: string;
  label?: string;
}

const SavingsCard: React.FC<SavingsCardProps> = ({ 
  currency, 
  amount, 
  percentage, 
  bgColor, 
  textColor,
  metricTextColor,
  label = "Savings"
}) => {
  return (
    <div className={`rounded-3xl p-10 ${bgColor}`}>
      <p className={`text-sm p-1 ${textColor}`}>{label}</p>
      <p className={`text-2xl p-1 font-bold ${textColor}`}>{currency}{amount}</p>
      <p className={`text-base p-1 ${textColor}`}>{percentage} <span className={`block ${metricTextColor}`}>From Last Month</span></p>
    </div>
  );
};

export default SavingsCard;