import * as React from "react";
import { cn } from "@/lib/utils";

export interface SweepButtonProps extends React.ComponentProps<"button"> {
  /** Color of the moving highlight. */
  shimmerColor?: string;
  /** Seconds per sweep. */
  duration?: number;
}

export function SweepButton({
  className,
  shimmerColor = "rgba(255,255,255,0.45)",
  duration = 2.4,
  children,
  style,
  ...props
}: SweepButtonProps) {
  return (
    <button
      className={cn(
        "group relative inline-flex h-11 items-center justify-center overflow-hidden rounded-full bg-neutral-950 px-7 font-medium text-white shadow-lg shadow-black/20 transition-transform active:scale-[0.97] dark:bg-white dark:text-neutral-950",
        className,
      )}
      style={{ ...style, ["--shimmer" as string]: shimmerColor, ["--dur" as string]: `${duration}s` }}
      {...props}
    >
      <span
        aria-hidden
        className="absolute inset-y-0 -left-1/2 w-1/2 -skew-x-12 bg-[linear-gradient(90deg,transparent,var(--shimmer),transparent)] [animation:sweep-shine_var(--dur)_ease-in-out_infinite]"
      />
      <span className="relative flex items-center gap-2">{children}</span>
      <style>{`@keyframes sweep-shine{0%{transform:translateX(0)}60%,100%{transform:translateX(400%)}}`}</style>
    </button>
  );
}