import { Button } from '@luxfi/ui/button';
import React from 'react';

import config from 'configs/app';
import useAddChainClick from 'lib/web3/useAddChainClick';
import useProvider from 'lib/web3/useProvider';
import { WALLETS_INFO } from 'lib/web3/wallets';
import IconSvg from 'ui/shared/IconSvg';

interface Props {
  source: 'Footer' | 'Top bar';
  onAddSuccess?: () => void;
}

const NetworkAddToWallet = ({ source, onAddSuccess }: Props) => {
  const { wallet } = useProvider().data ?? {};

  const handleClick = useAddChainClick({ source, onSuccess: onAddSuccess });

  if (!wallet) {
    return null;
  }

  const walletInfo = WALLETS_INFO[wallet];

  return (
    <Button
      variant="outline"
      size="2xs"
      className="border font-medium hover:text-[var(--color-link-primary-hover)] hover:border-[var(--color-link-primary-hover)]"
      style={{ color: walletInfo.color, borderColor: walletInfo.color }}
      onClick={ handleClick }
    >
      <IconSvg name={ walletInfo.icon } className="size-3"/>
      Add { config.chain.name }
    </Button>
  );
};

export default React.memo(NetworkAddToWallet);