import { TokenLogo } from "@src/components";
import { useSwapContext } from "@src/context";
import { TokenOption } from "@src/models";
import { useMemo } from "react";

type Props = {
  token: TokenOption;
  selectedTokenAddress: string | undefined;
  onClick: () => void;
};
export const QuickPickTokenItem = ({
  token,
  selectedTokenAddress,
  onClick,
}: Props) => {
  const { supportedChains } = useSwapContext();

  const chain = useMemo(
    () => supportedChains.find(({ chainId }) => chainId === token.chainId),
    [supportedChains, token],
  );

  return (
    <button
      type="button"
      className={`flex gap-2 py-2 pr-[14px] pl-2 items-center rounded-x_radius text-start hover:bg-t_bg_tertiary hover:bg-opacity-10 ${
        token.address.toLowerCase() === selectedTokenAddress?.toLowerCase()
          ? "bg-t_bg_tertiary bg-opacity-10"
          : "bg-t_bg_tertiary bg-opacity-5"
      }`}
      onClick={onClick}
    >
      <TokenLogo token={token} className="w-6" generatedLogoClassName="w-6" />
      <div className="flex flex-col gap-1 text-xs font-medium !leading-3">
        <div className="text-t_text_primary">{token.symbol}</div>
        <div className="text-t_text_primary text-opacity-50">
          {chain?.displayName}
        </div>
      </div>
    </button>
  );
};