import { AddIcon } from "@src/assets";
import { Skeleton } from "@src/components";
import { usePrivySmartWallet, useSwapContext } from "@src/contexts";
import { RoutePath } from "@src/interfaces";
import { useNavigate } from "react-router-dom";

export const YourCashItem = ({ balances, chainId }) => {
  const { isFetchingBalances, supportedChainsMap, setChain, supportedChains } =
    useSwapContext();
  const { smartWalletAddress } = usePrivySmartWallet();
  const navigate = useNavigate();

  const cashChain = supportedChainsMap[chainId];

  return (
    <div className="flex flex-shrink-0 justify-between gap-2 items-center pl-2">
      <div className="flex gap-2 items-center">
        <img src={cashChain?.image} className="w-4 h-4" />

        <span className="text-xs capitalize text-text_primary">
          {cashChain?.name}
        </span>
      </div>
      <div className="flex gap-4 items-center h-8">
        {isFetchingBalances || !smartWalletAddress ? (
          <Skeleton className="w-8 h-3" />
        ) : (
          <p className="text-xs font-bold text-text_primary">
            ${balances?.abbreviated}
          </p>
        )}
        <div
          className="hover:cursor-pointer"
          onClick={() => {
            const dstChain = supportedChains.find((c) => c.chainId === chainId);
            setChain(dstChain);

            navigate(RoutePath.Deposit);
          }}
        >
          <AddIcon />
        </div>
      </div>
    </div>
  );
};