import { useMemo } from 'react';
import { CustomIconProps } from '../CustomIcon';
import { cloneIcon } from 'utils/cloneIcon';
import { PWAIcon } from './PWAIcon';
import { WebAppIcon } from './WebAppIcon';

const TEMPLATE_ICONS = ['pwa', 'web'] as const;
export type TemplateIconType = (typeof TEMPLATE_ICONS)[number];

export interface TemplateIconProps extends CustomIconProps {
  type: TemplateIconType;
}

export const TemplateIcon = ({ type, ...props }: TemplateIconProps) => {
  const renderIcon = useMemo(() => {
    switch (type) {
      case 'pwa':
        return <PWAIcon />;
      case 'web':
        return <WebAppIcon />;
      default:
        throw new Error(`Invalid template icon type: ${type}`);
    }
  }, [type]);

  return cloneIcon(renderIcon, props) as JSX.Element;
};