import React from "react";
import { formatAmount } from "../../lib/utils/helpers";

interface FinancialCardProps {
    title: string;
    amount: number;
    growth: string;
    bgColor: string;
    textColor: string;
  }
  
  
  // Financial Card Component
  export const FinancialCard = ({ title, amount, growth, bgColor, textColor }: FinancialCardProps) => {
    return (
      <div className={`${bgColor} rounded-4xl p-4 sm:p-6 text-white`}>
        <h3 className="text-base sm:text-lg font-semibold mb-2">{title}</h3>
        <div className="text-xl sm:text-2xl lg:text-3xl font-bold mb-2">{formatAmount(amount)}</div>
        <div className={`flex items-center space-x-1 ${textColor}`}>
          <span className="text-xs sm:text-sm">{growth}</span>
        </div>
        <div className={`${textColor} text-xs mt-1`}>From Last Month</div>
      </div>
    );
  };