import { TokenLogo } from "@src/components";
import { TokenOption } from "@src/models";

type Props = {
  token: TokenOption;
  selectedTokenAddress: string | undefined;
  onClick: () => void;
};
export const QuickPickTokenItem = ({
  token,
  selectedTokenAddress,
  onClick,
}: Props) => {
  return (
    <button
      type="button"
      className={`flex gap-2 py-2 pr-[14px] pl-2 items-center border border-solid border-t_text_primary border-opacity-10 rounded-3xl 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_primary"
      }`}
      onClick={onClick}
    >
      <TokenLogo
        token={token}
        className="w-6 h-6"
        generatedLogoClassName="w-6 h-6"
      />
      <div className="flex flex-col gap-1 text-xs font-medium !leading-3">
        <div className="text-t_text_primary">{token.name}</div>
        <div className="text-t_text_primary text-opacity-50">
          {token.symbol}
        </div>
      </div>
    </button>
  );
};