import React, { useContext } from 'react';
import { SettingsContext } from '../../App/SettingsContext';
import { translate } from '../../../Helper';

const ReferralHistoryRow = ({ referral }) => {
    const { currency } = useContext(SettingsContext);
    const orderViewUrl = `admin.php?page=wc-orders&action=edit&id=${referral.order_id}`;

    // Helper function to format amount with currency
    const formatAmount = (amount) => {
        // Remove any existing currency symbols and format with dynamic currency
        const cleanAmount = String(amount).replace(/[$€£¥₹₽¢₩₪₦₡₨₫₱₴₵₸₺₼₾₿]/g, '');
        return `${currency}${cleanAmount}`;
    };
  return (
    <tr className="hover:ecre-bg-gray-50">
        <td className="ecre-px-5 ecre-py-4 ecre-whitespace-nowrap">
            <div className="ecre-text-[#4f4f4f] ecre-text-sm ecre-font-semibold">
              {referral.fullname}
            </div>
            <div className="ecre-text-sm ecre-text-[#757575] ecre-font-normal">{referral.customer_email}</div>
        </td>
        <td className="ecre-px-5 ecre-py-4 ecre-whitespace-nowrap ecre-text-sm ecre-text-gray-900">
          {formatAmount(referral.order_value)}
        </td>
        <td className="ecre-px-5 ecre-py-4 ecre-whitespace-nowrap ecre-text-sm ecre-text-gray-900">
            {referral.date}
        </td>
        <td className="ecre-px-5 ecre-py-4 ecre-whitespace-nowrap ecre-text-sm ecre-text-gray-900">
            {translate(referral.status.toLowerCase().replace(' ', '_'))}
        </td>
        <td className="ecre-px-5 ecre-py-4 ecre-whitespace-nowrap">
            <a 
              href={orderViewUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="ecre-text-blue-600 ecre-cursor-pointer hover:ecre-underline hover:ecre-text-[#6A40D5] ecre-text-sm ecre-font-medium"
            >
              {translate('referral_history_view_order')}
            </a>
        </td>
    </tr>
  );
};

export default ReferralHistoryRow;