Shimmer button

/* globals.css
@keyframes sheen { 0% { transform: translateX(-100%); } 42%, 100% { transform: translateX(100%); } }
*/
import { cn } from "@/lib/utils";

interface ShimmerButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "solid" | "outline";
}

export function ShimmerButton({ variant = "solid", className, children, ...props }: ShimmerButtonProps) {
  return (
    <button
      type="button"
      className={cn(
        "relative isolate inline-flex h-11 items-center justify-center gap-1.5 overflow-hidden rounded px-5 text-[15px] font-medium transition active:scale-[.97] motion-reduce:transition-none [&_svg]:size-4",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
        variant === "solid" ? "bg-primary text-primary-fg hover:bg-primary-hover" : "border border-border-strong bg-bg text-fg hover:bg-surface",
        className,
      )}
      {...props}
    >
      {children}
      <span
        aria-hidden
        className={cn(
          "pointer-events-none absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent to-transparent",
          "animate-[sheen_3.4s_cubic-bezier(.2,.7,.1,1)_.5s_infinite] motion-reduce:animate-none",
          variant === "solid" ? "via-primary-fg/40" : "via-primary/20",
        )}
      />
    </button>
  );
}