import type { FC } from 'react';

interface LoaderProps {
  size?: 0.5 | 1 | 2 | 3;
}

export const Loader: FC<LoaderProps> = ({ size = 2 }) => {
  const variants = {
    0.5: 'size-6 border-1 after:top-1 after:left-0.5 after:size-1.5 after:border-1',
    1: 'size-12 border-2 after:top-2 after:left-1 after:size-3 after:border-2',
    2: 'size-24 border-4 after:top-3 after:left-2 after:size-6 after:border-4',
    3: 'size-36 border-6 after:top-4 after:left-3 after:size-9 after:border-6',
  };

  return (
    <div className="flex justify-center">
      <span
        className={`relative inline-block ${variants[size]} animate-spin rounded-[50%] border-red-500 after:absolute after:rounded-[50%] after:border-black after:content-['']`}
      ></span>
    </div>
  );
};
