import classNames from 'classnames';

interface Props {
  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
  className?: string;
}

export function LoadingIcon({ size = 'md', className }: Props) {
  const classes = classNames(
    className,
    'text-inherit flex-shrink-0',
    size === 'xl' && 'h-6 w-6',
    size === 'lg' && 'h-5 w-5',
    size === 'md' && 'h-4 w-4',
    size === 'sm' && 'h-3.5 w-3.5',
    size === 'xs' && 'h-3 w-3',
    size === '2xs' && 'h-2.5 w-2.5',
    'animate-spin',
  );

  return (
    <div
      className={classNames(
        classes,
        'border-[currentColor] border-b-transparent rounded-full',
        size === 'xl' && 'border-[0.2rem]',
        size === 'lg' && 'border-[0.16rem]',
        size === 'md' && 'border-[0.13rem]',
        size === 'sm' && 'border-[0.1rem]',
        size === 'xs' && 'border-[0.08rem]',
        size === '2xs' && 'border-[0.06rem]',
      )}
    />
  );
}