interface ReviewCardProps {
    loanAmount: number;
    interest: number;
    totalAmountDue: number;
    dueDate: string;
    dueAmount: number;
    monthlyRepayment: number;
    installments: number;
    duration: number;
  }
  
  export const ReviewCard: React.FC<ReviewCardProps> = ({
    loanAmount,
    interest,
    totalAmountDue,
    dueDate,
    dueAmount,
    monthlyRepayment,
    installments,
    duration,
  }) => {
    return (
      <div className="bg-[#F5F5F599] rounded-3xl shadow-sm p-6 sm:p-8 h-fit lg:sticky lg:top-8 border">
        <h2 className="text-xl font-semibold text-gray-900 text-center mb-4">Review</h2>
  
        <div className="text-center mb-6">
          <p className="text-4xl font-bold text-gray-900 mb-2">N{loanAmount.toLocaleString()}</p>
          <p className="text-sm text-gray-600 mb-1">by {dueDate}</p>
          <p className="text-sm text-purple-700 flex items-center justify-center gap-1">
            <span className="w-2 h-2 bg-purple-700 rounded-full"></span>
            {installments} installments for {duration} days
          </p>
        </div>
  
        <div className="space-y-4 border-t border-gray-100 pt-6">
          <div className="flex justify-between items-center">
            <span className="text-gray-600 text-sm">LOAN AMOUNT</span>
            <span className="text-gray-900 font-medium">N{loanAmount.toLocaleString()}.00</span>
          </div>
  
          <div className="flex justify-between items-center">
            <span className="text-gray-600 text-sm">INTEREST</span>
            <span className="text-gray-900 font-medium">N{interest.toLocaleString()}.00</span>
          </div>
  
          <div className="flex justify-between items-center pb-4 border-b border-gray-100">
            <span className="text-gray-600 text-sm">TOTAL AMOUNT DUE</span>
            <span className="text-gray-900 font-semibold">N{totalAmountDue.toLocaleString()}.00</span>
          </div>
  
          <div className="flex justify-between items-center pt-2">
            <span className="text-gray-600 text-sm">1/{installments} DUE DATE</span>
            <span className="text-gray-900 font-medium">{dueDate}</span>
          </div>
  
          <div className="flex justify-between items-center">
            <span className="text-gray-600 text-sm">DUE AMOUNT</span>
            <span className="text-gray-900 font-medium">N{dueAmount.toLocaleString()}.00</span>
          </div>
  
          <div className="flex justify-between items-center">
            <span className="text-gray-600 text-sm">MONTHLY REPAYMENT</span>
            <span className="text-gray-900 font-medium">N{monthlyRepayment.toLocaleString()}.00</span>
          </div>
        </div>
      </div>
    );
  };