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

const BARS = [
  { height: "h-3", delay: "0s" },
  { height: "h-5", delay: "0.15s" },
  { height: "h-7", delay: "0.3s" },
  { height: "h-4", delay: "0.45s" },
];

export function AnimatedLoader({
  variant = "signal",
  label,
  className,
}: {
  variant?: "signal" | "dots";
  label?: string;
  className?: string;
}) {
  if (variant === "dots") {
    return (
      <div className={cn("flex items-center gap-1.5", className)}>
        {[0, 1, 2].map((i) => (
          <span
            key={i}
            className="h-2 w-2 rounded-full bg-gold animate-pulse-dot"
            style={{ animationDelay: `${i * 0.16}s` }}
          />
        ))}
      </div>
    );
  }

  return (
    <div className={cn("flex flex-col items-center gap-4", className)}>
      <div className="flex items-end gap-1.5" aria-hidden>
        {BARS.map((bar, i) => (
          <span
            key={i}
            className={cn(
              "w-2 origin-bottom rounded-full bg-gradient-to-t from-gold-dim to-gold-bright",
              bar.height
            )}
            style={{
              animation: "signal-rise 1s ease-in-out infinite",
              animationDelay: bar.delay,
            }}
          />
        ))}
      </div>
      {label && (
        <p className="text-sm font-medium text-muted animate-pulse">{label}</p>
      )}
    </div>
  );
}