import { CashLogoWithChain } from "@src/components";
import { Balances } from "@src/interfaces";
import { Chain, TokenWithChain } from "@src/models";

type Props = {
  token: TokenWithChain;
  chain: Chain;
  balances?: Balances;
  isSelected?: boolean;
  isDisabled?: boolean;
  onClick: () => void;
};

export const UsdcChainItem = ({
  token,
  chain,
  balances,
  isSelected = false,
  onClick,
}: Props) => {
  return (
    <button
      className={`flex-1 w-full max-w-full flex gap-2 p-4 items-center justify-between cursor-pointer hover:bg-bg_text_primary/10 rounded-xl min-w-0 overflow-visible ${
        isSelected && "bg-card_bg"
      }`}
      onClick={onClick}
    >
      <div className="flex gap-2 items-center">
        <CashLogoWithChain chain={chain} size="large" />
        <p className="text-xl capitalize font-medium text-x-purple-500">
          {`${token.name} ${chain.name}`}
        </p>
      </div>

      {balances?.abbreviated && (
        <p className="text-xs text-text_primary font-bold">
          ${balances?.abbreviated}
        </p>
      )}
    </button>
  );
};