import React from 'react';

let Svg: any = null;
let Path: any = null;

try {
  const RNSvg = require('react-native-svg');
  Svg = RNSvg.Svg || RNSvg.default;
  Path = RNSvg.Path;
} catch (e) {
  // react-native-svg not present
}

type IconProps = {
  size?: number;
  color?: string;
};

const fallback = (size: number): React.ReactElement => (
  <></>
);

export const SearchSvgIcon: React.FC<IconProps> = ({
  size = 48,
  color = '#4A2BC2',
}) => {
  if (!(Svg && Path)) return fallback(size);
  return (
    <Svg width={size} height={size} viewBox="0 0 72 72" fill="none">
      <Path
        d="M47.2651 42.765H44.8951L44.0551 41.955C46.9951 38.535 48.7651 34.095 48.7651 29.265C48.7651 18.495 40.0351 9.76501 29.2651 9.76501C18.4951 9.76501 9.76514 18.495 9.76514 29.265C9.76514 40.035 18.4951 48.765 29.2651 48.765C34.0951 48.765 38.5351 46.995 41.9551 44.055L42.7651 44.895V47.265L57.7651 62.235L62.2351 57.765L47.2651 42.765ZM29.2651 42.765C21.7951 42.765 15.7651 36.735 15.7651 29.265C15.7651 21.795 21.7951 15.765 29.2651 15.765C36.7351 15.765 42.7651 21.795 42.7651 29.265C42.7651 36.735 36.7351 42.765 29.2651 42.765Z"
        fill={color}
      />
    </Svg>
  );
};

export const InboxCopySvgIcon: React.FC<IconProps> = ({
  size = 48,
  color = '#4A2BC2',
}) => {
  if (!(Svg && Path)) return fallback(size);
  return (
    <Svg width={size} height={size} viewBox="0 0 72 72" fill="none">
      <Path
        d="M57 9H15C11.7 9 9 11.7 9 15V57C9 60.3 11.67 63 15 63H57C60.3 63 63 60.3 63 57V15C63 11.7 60.3 9 57 9ZM57 57H15V48H25.68C27.75 51.57 31.59 54 36.03 54C40.47 54 44.28 51.57 46.38 48H57V57ZM57 42H42.03C42.03 45.3 39.33 48 36.03 48C32.73 48 30.03 45.3 30.03 42H15V15H57V42Z"
        fill={color}
      />
    </Svg>
  );
};

export const RocketLaunchSvgIcon: React.FC<IconProps> = ({
  size = 48,
  color = '#4A2BC2',
}) => {
  if (!(Svg && Path)) return fallback(size);
  return (
    <Svg width={size} height={size} viewBox="0 0 72 72" fill="none">
      <Path
        d="M18.001 44.9988C15.511 44.9988 13.261 46.0188 11.641 47.6388C8.10098 51.1788 6.00098 65.9988 6.00098 65.9988C6.00098 65.9988 20.821 63.8988 24.361 60.3588C25.981 58.7388 27.001 56.4888 27.001 53.9988C27.001 49.0188 22.981 44.9988 18.001 44.9988ZM20.131 56.1288C19.291 56.9688 13.621 58.4088 13.621 58.4088C13.621 58.4088 15.031 52.7688 15.901 51.8988C16.411 51.3288 17.161 50.9988 18.001 50.9988C19.651 50.9988 21.001 52.3488 21.001 53.9988C21.001 54.8388 20.671 55.5888 20.131 56.1288ZM52.261 40.9488C71.341 21.8688 64.981 7.01882 64.981 7.01882C64.981 7.01882 50.131 0.658821 31.051 19.7388L23.581 18.2388C21.631 17.8488 19.591 18.4788 18.151 19.8888L6.00098 32.0688L21.001 38.4888L33.511 50.9988L39.931 65.9988L52.081 53.8488C53.491 52.4388 54.121 50.3988 53.731 48.4188L52.261 40.9488ZM22.231 32.4888L16.501 30.0288L22.411 24.1188L26.731 24.9888C25.021 27.4788 23.491 30.0888 22.231 32.4888ZM41.971 55.4988L39.511 49.7688C41.911 48.5088 44.521 46.9788 46.981 45.2688L47.851 49.5888L41.971 55.4988ZM48.001 36.7188C44.041 40.6788 37.861 43.9188 35.881 44.9088L27.091 36.1188C28.051 34.1688 31.291 27.9888 35.281 23.9988C49.321 9.95882 59.971 12.0288 59.971 12.0288C59.971 12.0288 62.041 22.6788 48.001 36.7188ZM45.001 32.9988C48.301 32.9988 51.001 30.2988 51.001 26.9988C51.001 23.6988 48.301 20.9988 45.001 20.9988C41.701 20.9988 39.001 23.6988 39.001 26.9988C39.001 30.2988 41.701 32.9988 45.001 32.9988Z"
        fill={color}
      />
    </Svg>
  );
};

export const ErrorOutlineSvgIcon: React.FC<IconProps> = ({
  size = 48,
  color = '#4A2BC2',
}) => {
  if (!(Svg && Path)) return fallback(size);
  return (
    <Svg width={size} height={size} viewBox="0 0 72 72" fill="none">
      <Path
        d="M33 45H39V51H33V45ZM33 21H39V39H33V21ZM35.97 6C19.41 6 6 19.44 6 36C6 52.56 19.41 66 35.97 66C52.56 66 66 52.56 66 36C66 19.44 52.56 6 35.97 6ZM36 60C22.74 60 12 49.26 12 36C12 22.74 22.74 12 36 12C49.26 12 60 22.74 60 36C60 49.26 49.26 60 36 60Z"
        fill={color}
      />
    </Svg>
  );
};