import React, { useEffect, useState } from "react";
import { twMerge } from "../../utils/tailwindMerge";

export const TokenIcon = ({
	url,
	classNames,
}: {
	url: string;
	classNames?: string;
}) => {
	const [imageUrl, setUrl] = useState<string>(url);

	useEffect(() => {
		setUrl(url);
	}, [url]);

	const FALLBACK_ICON =
		"https://www.bungee.exchange/_next/static/media/fallback-icon.47257b72.svg";
	const classes = twMerge(
		"bn-h-6 bn-w-6 bn-rounded-full bn-overflow-hidden bn-relative",
		classNames,
	);

	return (
		<div className={classes}>
			<img
				src={imageUrl ?? FALLBACK_ICON}
				width="100%"
				height="100%"
				alt="placeholder icon"
				className="bn-object-cover bn-absolute bn-top-0 bn-left-0"
				onError={() => setUrl(FALLBACK_ICON)}
			/>
		</div>
	);
};
