export const TokenItemSkeleton = ({
	showChainIcon = false,
}: {
	showChainIcon?: boolean;
}) => {
	return (
		<div className="bn-h-[56px] bn-flex bn-items-center bn-justify-between bn-w-full bn-px-4 bn-animate-pulse">
			<div className="bn-flex bn-items-center">
				{/* Token Icon */}
				<div className="bn-h-7 bn-w-7 bn-relative">
					<div className="bn-h-full bn-w-full bn-rounded-full bn-bg-layer-3" />
					{showChainIcon && (
						<div className="bn-h-[14px] bn-w-[14px] bn-absolute bn-bottom-0 -bn-right-[2.5px] bn-rounded-full bn-bg-layer-3" />
					)}
				</div>

				{/* Token Info */}
				<div className="bn-flex bn-flex-col bn-items-start bn-ml-3 bn-space-y-1">
					<div className="bn-h-4 bn-w-20 bn-rounded-full bn-bg-layer-3" />
					<div className="bn-h-3 bn-w-32 bn-rounded-full bn-bg-layer-3" />
				</div>
			</div>

			{/* Balance skeleton */}
			<div className="bn-flex bn-flex-col bn-items-end bn-space-y-1">
				<div className="bn-h-4 bn-w-16 bn-rounded-full bn-bg-layer-3" />
				<div className="bn-h-3 bn-w-12 bn-rounded-full bn-bg-layer-3" />
			</div>
		</div>
	);
};
