import { MIcon } from "@components/common/MIcon";
import { useAccounts } from "@hooks/useAccounts";
import type { ReduxStateType } from "@store/types";
import { useMemo } from "react";
import { useSelector } from "react-redux";

export const CustomAddressWarning = () => {
	const receiver = useSelector(
		(state: ReduxStateType) => state.quoteParams.receiver,
	);
	const { accounts } = useAccounts();

	// Check if receiver is a custom address (not in connected accounts)
	const isCustomAddress = useMemo(() => {
		if (!receiver) return false;
		return !accounts.some(
			(account) => account.address?.toLowerCase() === receiver.toLowerCase(),
		);
	}, [receiver, accounts]);

	if (!isCustomAddress) return null;

	return (
		<div className="bn-text-sm bn-text-accent-1 bn-font-medium bn-bg-accent-1 bn-rounded-lg bn-px-2.5 bn-py-2 bn-flex bn-items-center bn-space-x-2 bn-mt-4 -bn-mb-2">
			<MIcon name="assignment" classNames="bn-text-lg" />
			<span>Verify custom wallet address before swapping</span>
		</div>
	);
};
