import React from 'react';
import PropTypes from 'prop-types';
import cx from "classnames"
import library from './assets/icon-map';

const SIZES = {
  sm: "w-4 h-4",
  md: "w-6 h-6",
  lg: "w-8 h-8"
}

const lookupIcon = iconName => library.find(i => {
  if (i.name === iconName) {
    return i.component
  }
})
const CKIcon = ({ name, className, size = "md", ...props }) => {
  className = cx(
    "fill-current inline-block overflow-visible",
    SIZES[size],
    className,
  )

  if (name && typeof name == 'string') {
    const icon = lookupIcon(name)
    if (!icon) {
      return (
        <div>
          Sorry looks like the icon you are looking for does not exist.
        </div>
      )
    }

    const Icon = icon.component

    return <Icon className={className} name={name} style={{ fontSize: 'inherit' }} {...props} />
  }
};

CKIcon.propTypes = {
  /** Matches name in Figma, using lowercase and hyphens instead of spaces. */
  name: PropTypes.string.isRequired,
  size: PropTypes.oneOf(["sm", "md", "lg"]),
  /** Customize the icon. E.g. text-gray-700 */
  className: PropTypes.string,
}

export default CKIcon;
