import { Icon } from '@iconify/react';
import ApiIcon from '@iconify-icons/mdi/api';
import IOSRoundedIcon from '@iconify-icons/material-symbols/ios-rounded';
import LanguageIcon from '@iconify-icons/material-symbols/language';
import AndroidIcon from '@iconify-icons/material-symbols/android';
import QuestionMarkRoundedIcon from '@iconify-icons/material-symbols/question-mark-rounded';
// import Auth0Icon from '@iconify-icons/logos/auth0-icon';
import mailOutlineRoundedIcon from '@iconify-icons/material-symbols/mail-outline-rounded';
import { LOGIN_PROVIDER } from '../Util/constant';

export interface WalletOSIconProps {
  loading?: false | true;
  walletOS: string;
  provider?: string;
  color?: string;
}

export default function WalletOSIcon({
  loading = false,
  walletOS,
  provider = 'wallet',
  color = 'black',
}: WalletOSIconProps) {
  if (loading) {
    return <Icon icon={QuestionMarkRoundedIcon} style={{ color: 'transparent' }} />;
  }

  // if (provider === LOGIN_PROVIDER.EMAIL) {
  //   return <Icon icon={mailOutlineRoundedIcon} style={{ color, transform: 'scale(0.85)' }} />;
  // }
  if (provider === LOGIN_PROVIDER.AUTH0) {
    return <Icon icon={mailOutlineRoundedIcon} style={{ color, transform: 'scale(0.85)' }} />;
  }
  if (walletOS === 'ios') {
    return <Icon icon={IOSRoundedIcon} style={{ color, transform: 'scale(1.1)' }} />;
  }
  if (walletOS === 'android') {
    return <Icon icon={AndroidIcon} style={{ color }} />;
  }
  if (walletOS === 'web') {
    return <Icon icon={LanguageIcon} style={{ color }} />;
  }
  if (walletOS === 'api') {
    return <Icon icon={ApiIcon} style={{ color, transform: 'scale(1.05)' }} />;
  }
  return null;
}
