import React from 'react';

import * as Icons from 'icons';
import { IconProps } from 'icons/types';

const keys = Object.keys(Icons) as IconImportName[];

export const icons = keys.reduce((memo, name) => {
  const iconName = name.toLowerCase() as IconName;
  return {
    ...memo,
    [iconName]: Icons[name],
  };
}, {}) as IconMap;

export const Icon: React.FC<Props> = (props) => {
  const Component = icons[props.name];
  const { name, ...iconProps } = props;
  if (!Component) {
    return null;
  }

  return <Component {...iconProps} />;
};

export type IconImportName = keyof typeof Icons;
export type IconName = Lowercase<IconImportName>;

export interface Props extends IconProps {
  name: IconName;
  // TODO: Muhammad will add more props for this to make it compatible with all icons
}

export type IconPropsLocal = Omit<Props, 'name'>;
export type IconMap = Record<IconName, React.FC<IconPropsLocal>>;