import React from "react";
import styles from "./../loader/loader.module.css";

interface EnterpriseLoaderProps {
  title?:    string;
  subtitle?: string;
  steps?:    { label: string; state: "done" | "active" | "wait" }[];
}

const DEFAULT_STEPS = [
  { label: "Authenticating session",  state: "done"   as const },
  { label: "Fetching audit records",  state: "active" as const },
  { label: "Applying permissions",    state: "wait"   as const },
];

export const EnterpriseLoader: React.FC<EnterpriseLoaderProps> = ({
  title    = "Loading your data",
  subtitle = "Please wait while we fetch your records...",
  steps    = DEFAULT_STEPS,
}) => {
  const stepClass = (state: "done" | "active" | "wait") =>
    state === "done"   ? styles.stepDone
    : state === "active" ? styles.stepActive
    : styles.stepWait;

  return (
    <div className={styles.loaderOverlay}>
      <div className={styles.loaderContainer}>

        {/* ── Triple orbit rings ── */}
        <div className={styles.orbitWrap}>
          <div className={`${styles.ring} ${styles.ring1}`} />
          <div className={`${styles.ring} ${styles.ring2}`} />
          <div className={`${styles.ring} ${styles.ring3}`} />
          <div className={styles.core}>
            <svg viewBox="0 0 24 24">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
              <polyline points="14 2 14 8 20 8" />
              <line x1="16" y1="13" x2="8" y2="13" />
              <line x1="16" y1="17" x2="8" y2="17" />
            </svg>
          </div>
        </div>

        {/* ── Text ── */}
        <h3 className={styles.loaderTitle}>{title}</h3>
        <p className={styles.loaderSubtitle}>{subtitle}</p>

        {/* ── Step list ── */}
        <div className={styles.steps}>
          {steps.map((s, i) => (
            <div key={i} className={`${styles.step} ${stepClass(s.state)}`}>
              <span className={styles.stepDot} />
              <span className={styles.stepLabel}>{s.label}</span>
            </div>
          ))}
        </div>

        {/* ── Progress bar ── */}
        <div className={styles.track}>
          <div className={styles.trackFill} />
        </div>

      </div>
    </div>
  );
};