import { t } from "i18next";
import styles from "./LoadingIndicator.module.css";
import { LoadingSpinIcon } from "./LoadingSpinIcon";

export type LoadingIndicatorProps = {
  look?: "dark" | string;
  size?: number;
  active?: boolean;
  title?: string;
  subtitle?: string;
};

export const LoadingIndicator = ({
  active = true,
  look = "dark",
  title = t("components.loading_indicator.title"),
  subtitle = "",
}: LoadingIndicatorProps) => {
  const isDark = look === "dark";
  const loadingSpinClassName = isDark ? "text-brand" : "text-white";

  if (!active) {
    return;
  }

  return (
    <div className={styles.LoadingIndicator}>
      <LoadingSpinIcon size={12} className={loadingSpinClassName} />
      {/*<Spinner {...spinnerProps} />*/}
      {title ? (
        <h2
          className={cn(
            styles.LoadingIndicator__title,
            isDark ? styles.LoadingIndicator__darktext : styles.LoadingIndicator__lighttext
          )}
        >
          {title}
        </h2>
      ) : null}
      {subtitle ? (
        <p
          className={cn(
            styles.LoadingIndicator__subtitle,
            isDark ? styles.LoadingIndicator__darktext : styles.LoadingIndicator__lighttext
          )}
        >
          {subtitle}
        </p>
      ) : null}
    </div>
  );
};

LoadingIndicator.displayName = "LoadingIndicator";