"use client";

import { cn } from "@/lib/utils";

const borderColors = {
  1: "border-[#3cca62]",
  2: "border-[#783748]",
  3: "border-[#3cca62]",
  4: "border-[#054C73]",
  5: "border-[#B8272A]",
};

const defaultColor = "border-[#3CCA62]";

const Spinner = ({
  isSpinning,
  spinnerClassName,
  containerClassName,
  background = true,
  fixed = true,
  center = false,
}) => {
  const templateId = sessionStorage?.getItem("templateId") || "";
  const borderColorClass = borderColors[templateId] || defaultColor;

  return (
    <>
      {isSpinning && (
        <>
          {background && (
            <div className="fixed inset-0 z-10000 h-full w-full bg-black/10 backdrop-blur-[3px]" />
          )}
          <div
            className={cn(
              "z-10001",
              fixed &&
                "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
              center &&
                "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
              containerClassName,
            )}
          >
            <div className="flex items-center justify-center">
              <div
                className={cn(
                  "aspect-square w-36 animate-spin rounded-full border-b-4",
                  borderColorClass,
                  spinnerClassName,
                )}
              ></div>
            </div>
          </div>
        </>
      )}
    </>
  );
};

export default Spinner;