import React from 'react';

type LoaderSize = 'small' | 'medium' | 'large';

type LoaderColor = 'onDark' | 'onLight';

interface LoaderProps {
  color?: LoaderColor;
  size?: LoaderSize;
}

const Loader: React.FC<LoaderProps> = ({ color, size }) => {
  return (
    <div className="loader horizontal">
      <span className={`dot one ${size || 'small'} ${color || 'onDark'}`} />
      <span className={`dot two ${size || 'small'} ${color || 'onDark'}`} />
      <span className={`dot three ${size || 'small'} ${color || 'onDark'}`} />
    </div>
  );
};

export default Loader;