import { useTheme } from "../../hooks/useTheme";
import type { Chain } from "../../store/globalSlice";
import { getBorderRadius } from "../../utils/getBorderRadius";
import { TokenIcon } from "../common/TokenIcon";

export const NetworkSearchItem = ({
	chain,
	assetsLength,
	onClick,
}: { chain: Chain; assetsLength: number; onClick: () => void }) => {
	const theme = useTheme();
	return (
		<div className="bn-flex bn-items-center bn-justify-between bn-px-4 bn-py-2">
			<div className="bn-flex bn-items-center bn-text-left">
				<TokenIcon url={chain.icon} classNames="bn-w-7 bn-h-7" />
				<div className="bn-ml-3">
					<p className="bn-text-primary bn-font-medium bn-text-base bn-leading-[19.2px]">
						{chain.name}
					</p>
					{assetsLength && (
						<p className="bn-text-secondary bn-font-normal bn-text-sm bn-leading-[16.8px]">
							{assetsLength} Assets
						</p>
					)}
				</div>
			</div>

			<button
				className="bn-px-3 bn-py-2.5 bn-border-0 bn-outline-none bn-bg-layer-2 bn-text-primary bn-text-sm bn-font-normal bn-cursor-pointer"
				type="button"
				onClick={onClick}
				style={{ borderRadius: getBorderRadius(theme.borderRadius, 8) }}
			>
				View Assets
			</button>
		</div>
	);
};
