import { useTheme } from "@hooks/useTheme";
import { getBorderRadius } from "@utils/getBorderRadius";
import { twMerge } from "@utils/tailwindMerge";

export const TokenChipSkeleton = ({
	showChain = false,
	big = false,
	classNames,
}: {
	showChain?: boolean;
	big?: boolean;
	classNames?: string;
}) => {
	const theme = useTheme();

	return (
		<div
			className={twMerge(
				`bn-p-2 bn-flex bn-items-center bn-bg-layer-2 bn-space-x-1.5 bn-animate-pulse ${
					big ? "bn-text-lg" : "bn-text-sm"
				}`,
				classNames,
			)}
			style={{ borderRadius: getBorderRadius(theme.borderRadius, 20) }}
		>
			<div className="bn-relative bn-size-5">
				<div className="bn-size-full bn-rounded-full bn-bg-layer-3" />
				{showChain && (
					<div className="bn-h-2.5 bn-w-2.5 bn-absolute bn-bottom-0 -bn-right-[2.5px] bn-rounded-full bn-bg-layer-3" />
				)}
			</div>
			<div className="bn-h-4 bn-w-16 bn-rounded-full bn-bg-layer-3" />
		</div>
	);
};
