import { Skeleton } from "@src/components";
import { useSwapContext } from "@src/context";

export const Balance = () => {
  const { srcTokenBalanceInfo, isFetchingBalance } = useSwapContext();

  return (
    <div className="flex flex-col items-end">
      <p className="text-xs font-medium opacity-60">Balance:</p>
      {isFetchingBalance ? (
        <Skeleton className="w-[50px] h-[16px]" />
      ) : (
        <p
          className={`text-xs font-medium ${
            !srcTokenBalanceInfo && "opacity-60"
          }`}
        >
          {srcTokenBalanceInfo || "-"}
        </p>
      )}
    </div>
  );
};