import * as React from 'react';

import * as icons from './icons';
import { cx } from '../../utils/cx';

const sizeMap = {
  xs: 'uc-min-w-2 uc-w-2 uc-h-2',
  sm: 'uc-min-w-3 uc-w-3 uc-h-3',
  md: 'uc-min-w-4 uc-w-4 uc-h-4',
  lg: 'uc-min-w-6 uc-w-6 uc-h-6',
};

export interface IconProps {
  name: keyof typeof icons;
  size?: keyof typeof sizeMap;
  className?: string;
}

export const Icon = ({ name, size = 'md', className = '' }: IconProps): JSX.Element => {
  const SVG = icons[name];
  const isSpinner = name === 'spinner';
  const viewBox = isSpinner ? '0 0 100 100' : '0 0 16 16';
  return (
    <div className={cx(sizeMap[size], className, isSpinner ? 'uc-animate-spin' : '')}>
      <svg xmlns="http://www.w3.org/2000/svg" className="uc-fill-current" viewBox={viewBox}>
        <SVG />
      </svg>
    </div>
  );
};