import { LoadingOutlined } from "@ant-design/icons";
import { Spin, SpinProps } from "antd";
import { ReactNode } from "react";
import styles from "./LoadingSpinner.module.css";

export interface LoadingSpinnerProps {
  /** The text to display while loading */
  text?: string;
  /** The size of the spinner */
  size?: "small" | "default" | "large";
  /** Whether to show the spinner */
  spinning?: boolean;
  /** Custom CSS class name */
  className?: string;
  /** Whether to show the loading text */
  showText?: boolean;
  /** Custom icon */
  icon?: ReactNode;
  /** Whether to use full screen loading */
  fullScreen?: boolean;
  /** Custom background color */
  backgroundColor?: string;
  /** Custom text color */
  textColor?: string;
}

export default function LoadingSpinner({
  text = "",
  size = "large",
  spinning = true,
  className = "",
  showText = true,
  icon,
  fullScreen = false,
  backgroundColor,
  textColor,
}: LoadingSpinnerProps) {
  const containerClass = `${styles.loadingContainer} ${
    fullScreen ? styles.fullScreen : ""
  } ${className}`;

  const customIcon = icon || (
    <LoadingOutlined
      style={{
        fontSize: size === "large" ? 32 : size === "default" ? 24 : 16,
        color: textColor || "var(--ant-color-primary)",
      }}
      spin
    />
  );

  const containerStyle = {
    backgroundColor: backgroundColor || undefined,
  };

  const textStyle = {
    color: textColor || undefined,
  };

  return (
    <div className={containerClass} style={containerStyle}>
      <Spin
        spinning={spinning}
        size={size}
        indicator={customIcon as SpinProps["indicator"]}
        tip={showText ? text : undefined}
        className={styles.spinner}
      >
        {showText && !fullScreen && (
          <div className={styles.loadingText} style={textStyle}>
            {text}
          </div>
        )}
      </Spin>
    </div>
  );
} 