import * as React from 'react';
import clsx from 'clsx';

import type { SxProps, Theme } from '../@styles';
import { StyledLoading } from './styles';

export interface LoadingProps {
  /**
   * The size of the loader.
   * @default 'normal'
   */
  size?: 'big' | 'normal' | 'small';
  /**
   * Whether to invert the color of the lines.
   * @default false
   */
  invert?: boolean;
  /**
   * Custom class name in case you need to add custom styles to the component.
   */
  className?: string;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme>;
}

export const Loading = React.forwardRef(function (
  props: LoadingProps,
  ref: React.Ref<HTMLDivElement>
) {
  const { size = 'normal', invert = false, className, ...otherProps } = props;

  return (
    <StyledLoading ref={ref} {...otherProps} className={clsx(size, { invert: invert }, className)}>
      <div className="line" />
      <div className="line" />
      <div className="line" />
      <div className="line" />
      <div className="line" />
    </StyledLoading>
  );
});