import React from "react";
import { getTimeInMins } from "../../utils/getTimeInMins";
import { twMerge } from "../../utils/tailwindMerge";
import { BungeeIcon, type IconProps } from "./Icons";

export const TransferType = ({
	type = "Auto",
	time,
	classNames,
	iconProps,
}: {
	type?: "Auto" | "Manual";
	time: number;
	classNames?: string;
	iconProps?: IconProps;
}) => {
	const style = twMerge("bn-text-sm bn-flex bn-items-center", classNames);

	return (
		<div className={style}>
			<BungeeIcon {...iconProps} />
			<div className="bn-ml-1.5">
				<span className="bn-font-semibold bn-text-primary">{type}</span>{" "}
				<span className="bn-text-secondary">~ {getTimeInMins(time).full}</span>
			</div>
		</div>
	);
};
