import { cn } from "@repo/shadcn-ui/lib/utils";
import { useTranslation } from "../../locales/i18n.ts";
import { LoadingSpinIcon } from "./loading-spin-icon.tsx";

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

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

  if (!active) {
    return;
  }

  return (
    <div className={"flex flex-col items-center max-w-xs justify-center w-full h-full mx-auto"}>
      <LoadingSpinIcon size={12} className={loadingSpinClassName} />
      {/*<Spinner {...spinnerProps} />*/}
      {title ? (
        <h2
          className={cn(
            "mt-6 text-xl font-semibold text-center text-white",
            isDark ? "text-slate-600" : "text-white"
          )}
        >
          {title || t("components.loading_indicator.title")}
        </h2>
      ) : null}
      {subtitle ? (
        <p className={cn("text-center text-white", isDark ? "text-slate-600" : "text-white")}>
          {subtitle || t("components.loading_indicator.subtitle")}
        </p>
      ) : null}
    </div>
  );
};

LoadingIndicator.displayName = "LoadingIndicator";