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

const Avatar = ({ src, alt, name }) => {
  if (src) {
    return (
      <img 
        className="ecre-w-[45px] ecre-h-[45px] ecre-rounded-full" 
        src={src} 
        alt={alt || name} 
      />
    );
  }
  
  return (
    <div className="ecre-w-[45px] ecre-h-[45px] ecre-rounded-full ecre-bg-gray-400 ecre-flex ecre-items-center ecre-justify-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="23" height="24" viewBox="0 0 23 24" fill="none">
            <path d="M4.67622 6.6C4.67622 4.84957 5.38445 3.17084 6.64511 1.9331C7.90577 0.695355 9.61559 0 11.3984 0C13.1813 0 14.8911 0.695355 16.1518 1.9331C17.4124 3.17084 18.1207 4.84957 18.1207 6.6C18.1207 8.35043 17.4124 10.0292 16.1518 11.2669C14.8911 12.5046 13.1813 13.2 11.3984 13.2C9.61559 13.2 7.90577 12.5046 6.64511 11.2669C5.38445 10.0292 4.67622 8.35043 4.67622 6.6ZM0.398438 20.4C0.398438 18.8087 1.04228 17.2826 2.18834 16.1574C3.3344 15.0321 4.88878 14.4 6.50955 14.4H16.2873C17.9081 14.4 19.4625 15.0321 20.6085 16.1574C21.7546 17.2826 22.3984 18.8087 22.3984 20.4V24H0.398438V20.4Z" fill="white"/>
        </svg>
    </div>
  );
};

const ReferrerRow = ({ referrer, index, startIndex}) => {
  const { handleActiveScreen, setSelectedReferrer, currency } = useContext(SettingsContext);

  const handleViewClick = () => {
    // Set the selected referrer data
    setSelectedReferrer(referrer);
    // Navigate to referrer details screen
    handleActiveScreen('referrer_details');
  };

  return (
    <tr className="hover:ecre-bg-gray-50">
      <td className="ecre-px-5 ecre-py-4 ecre-whitespace-nowrap">
        <div className="ecre-flex ecre-items-center ecre-gap-3">
          <div className="ecre-flex-shrink-0">
            <Avatar 
              src={referrer.avatar} 
              alt={referrer.name}
              name={referrer.name}
            />
          </div>
          <div>
            <div className="ecre-text-[#4f4f4f] ecre-text-sm ecre-font-semibold">
              {startIndex + index + 1}. {referrer.name}
            </div>
            <div className="ecre-text-sm ecre-text-[#757575] ecre-font-normal">{referrer.email}</div>
          </div>
        </div>
      </td>
      <td className="ecre-px-5 ecre-py-4 ecre-whitespace-nowrap ecre-text-sm ecre-text-gray-900">
        {referrer.referrals}
      </td>
      <td className="ecre-px-5 ecre-py-4 ecre-whitespace-nowrap ecre-text-sm ecre-text-gray-900">
        {currency}{referrer.salesGenerated}
      </td>
      <td className="ecre-px-5 ecre-py-4 ecre-whitespace-nowrap">
        <a onClick={handleViewClick} className="ecre-text-[#3b71ca] ecre-cursor-pointer hover:ecre-underline ecre-text-sm ecre-font-medium">{translate('referrer_row_view')}</a>
      </td>
    </tr>
  );
};

export default ReferrerRow;