import React from "react";
import { ethers } from "ethers";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleRight, faCoins } from "@fortawesome/free-solid-svg-icons";
import AddressLink from "./AddressLink";
import { TransactionData, Transfer } from "../types";

type InternalTransferProps = {
  txData: TransactionData;
  transfer: Transfer;
};

const InternalTransfer: React.FC<InternalTransferProps> = ({
  txData,
  transfer,
}) => {
  const fromMiner =
    txData.miner !== undefined && transfer.from === txData.miner;
  const toMiner = txData.miner !== undefined && transfer.to === txData.miner;

  return (
    <div className="flex items-baseline space-x-1 text-xs">
      <span className="text-gray-500">
        <FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER
      </span>
      <span>{ethers.utils.formatEther(transfer.value)} Ether</span>
      <span className="text-gray-500">From</span>
      <div
        className={`flex items-baseline space-x-1 ${
          fromMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
        }`}
      >
        {fromMiner && (
          <span className="text-yellow-400" title="Miner address">
            <FontAwesomeIcon icon={faCoins} size="1x" />
          </span>
        )}
        <AddressLink address={transfer.from} />
      </div>
      <span className="text-gray-500">To</span>
      <div
        className={`flex items-baseline space-x-1 px-2 py-1 ${
          toMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
        }`}
      >
        {toMiner && (
          <span className="text-yellow-400" title="Miner address">
            <FontAwesomeIcon icon={faCoins} size="1x" />
          </span>
        )}
        <AddressLink address={transfer.to} />
      </div>
    </div>
  );
};

export default React.memo(InternalTransfer);