"use client";
import React from 'react';

interface BankDetailsProps {
  bankName: string;
  accountNumber: string;
  accountName: string;
  transferAmount: number;
}

const BankDetailsCard: React.FC<BankDetailsProps> = ({
  bankName,
  accountNumber,
  accountName,
  transferAmount,
}) => {
  return (
    <div>
      <h3 className="text-lg font-semibold text-gray-900 mb-4">
        Transfer N{transferAmount.toLocaleString()} to the account below
      </h3>
      <div className="bg-gray-50 rounded-2xl p-6 space-y-4">
        <div className="flex justify-between items-center">
          <span className="text-gray-600 font-medium">BANK NAME</span>
          <span className="text-gray-900 font-semibold">{bankName}</span>
        </div>
        <div className="flex justify-between items-center">
          <span className="text-gray-600 font-medium">ACCOUNT NUMBER</span>
          <span className="text-gray-900 font-semibold">{accountNumber}</span>
        </div>
        <div className="flex justify-between items-center">
          <span className="text-gray-600 font-medium">ACCOUNT NAME</span>
          <span className="text-gray-900 font-semibold">{accountName}</span>
        </div>
      </div>
    </div>
  );
};

export default BankDetailsCard;