import Icon from '../Icon';
import './Loader.scss';

export interface LoaderProps {
  /**
   * variant | variant of the loader
   */
  variant?: 'BouncingDots' | 'BlinkingDotsLoader';
}
const bouncingDotsLoaderLength = [1, 2, 3, 4];
const blinkingDotsLoaderLength = [1, 2, 3];
const getBouncingDots = () => {
  return (
    <div className="bouncing-loader">
      {bouncingDotsLoaderLength.map(() => {
        return <div className="dots"></div>;
      })}
    </div>
  );
};
const getBlinkingDotsLoader = () => {
  return (
    <div className="loader-container">
      <span className="loader_icon">
        <Icon name="chatbot_loader" height={12} width={18} />
      </span>
      <div className="loader-dots">
        {blinkingDotsLoaderLength.map(() => {
          return <span className="dot"></span>;
        })}
      </div>
    </div>
  );
};
const Loader = ({ variant }: LoaderProps) => {
  return (
    <>
      {variant === 'BouncingDots' && getBouncingDots()}
      {variant === 'BlinkingDotsLoader' && getBlinkingDotsLoader()}
    </>
  );
};
export default Loader;