import React from "react";

interface BankDetails {
  bankName: string;
  accountNumber: string;
  accountName: string;
}

interface WithdrawReviewProps {
  bankDetails?: BankDetails | null;
  amount?: string;
  processingFee?: string;
  totalAmount?: string;
}

export const WithdrawReview: React.FC<WithdrawReviewProps> = ({
  amount = "₦0.00",
  processingFee = "₦10",
  totalAmount = "₦0.00",
}) => {
  return (
    <div className="bg-[#F5F5F599] rounded-lg border border-[#1C1C1C1A] p-6 h-fit sticky top-6">
      <h3 className="text-lg font-bold mb-2 text-center text-[#111827]">Review</h3>

      {/* Amount Breakdown */}
      <div className="space-y-3 mb-6">
        <div className="flex justify-between items-center py-2">
          <span className="text-sm text-gray-600">Amount</span>
          <span className="font-semibold text-gray-900">{amount}</span>
        </div>
        <div className="flex justify-between items-center py-2">
          <span className="text-sm text-gray-600">Processing fee</span>
          <span className="font-semibold text-gray-900">{processingFee}</span>
        </div>
        <div className="border-t border-gray-200 pt-3">
          <div className="flex justify-between items-center">
            <span className="text-base font-semibold text-gray-900">Total</span>
            <span className="text-lg font-bold text-purple-600">{totalAmount}</span>
          </div>
        </div>
      </div>
    </div>
  );
};