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

type Props = {
  name: string;
  value: string;
};
export const Fee = ({ name, value }: Props) => {
  const { isFetchingRoute } = useSwapContext();
  return (
    <div className="flex gap-x-1 justify-between text-xs font-medium">
      <div className="opacity-60">{name}</div>
      <div>
        {isFetchingRoute ? <Skeleton className="w-[60px] h-full" /> : value}
      </div>
    </div>
  );
};