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

interface SmartOfficeLoaderProps {
  label?: string;
  className?: string;
}

export default function SmartOfficeLoader({
  label = "Loading",
  className,
}: SmartOfficeLoaderProps) {
  return (
    <div
      className={cn(
        "min-h-screen flex flex-col items-center justify-center gap-5 bg-gradient-to-br from-primary-50 via-white to-primary-50 dark:from-slate-950 dark:via-slate-900 dark:to-primary-950/40",
        className
      )}
      role="status"
      aria-live="polite"
      aria-label={label}
    >
      <div className="relative h-20 w-20">
        <span className="absolute inset-0 rounded-full border-4 border-primary-100 dark:border-primary-950/80" />
        <span className="absolute inset-0 rounded-full border-4 border-transparent border-t-primary-600 border-r-primary-500 dark:border-t-primary-400 dark:border-r-primary-500 animate-spin" />
        <span
          className="absolute inset-3 rounded-full border-4 border-transparent border-b-primary-500 border-l-primary-400 dark:border-b-primary-300 dark:border-l-primary-400 animate-spin"
          style={{ animationDirection: "reverse", animationDuration: "1.2s" }}
        />
        <span className="absolute inset-[1.65rem] rounded-full bg-primary-500/85 dark:bg-primary-400/90 shadow-[0_0_24px_rgba(34,197,94,0.45)] dark:shadow-[0_0_30px_rgba(16,185,129,0.7)] animate-pulse" />
      </div>

      <p className="text-sm font-semibold tracking-wide text-primary-700 dark:text-primary-300">
        {label}
      </p>
    </div>
  );
}
