import React from "react"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import PropTypes from "prop-types"

import { icons } from "./icons"
import "./library"

export const lookupSocialIcon = icon => icons.find(i => i.iconName === icon)

const FontAwesomeNameFallbacks = [
  { old: "external-link", new: "arrow-up-right-from-square" },
  { old: "shoping-cart", new: "cart-shopping" },
  { old: "telegram-plane", new: "telegram" },
  { old: "snapchat-ghost", new: "snapchat" },
]

const SocialIcon = ({ name, ...props }) => {
  let iconName
  if (name && typeof name == "string") {
    const oldName = FontAwesomeNameFallbacks.find(f => f.old === name)
    if(oldName) {
      iconName = lookupSocialIcon(oldName.new)
    } else {
      iconName = lookupSocialIcon(name)
    }
  }

  return <FontAwesomeIcon icon={iconName} {...props} />
}

SocialIcon.propTypes = {
  name: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
}

export default SocialIcon
