Shimmer Button

import React, { type CSSProperties } from "react"
import { cn } from "@/lib/utils"

interface ShimmerButtonProps extends React.ComponentProps<"button"> {
  shimmerColor?: string
  shimmerSize?: string
  borderRadius?: string
  shimmerDuration?: string
  background?: string
  className?: string
  children?: React.ReactNode
}

export const ShimmerButton = React.forwardRef<HTMLButtonElement, ShimmerButtonProps>(({
  shimmerColor = "#ffffff",
  shimmerSize = "0.05em",
  shimmerDuration = "3s",
  borderRadius = "100px",
  background = "rgba(0, 0, 0, 1)",
  className,
  children,
  ...props
}, ref) => {
  return (
    <button ref={ref} className={cn("group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap border border-white/10 px-6 py-3 text-white [background:var(--bg)] [border-radius:var(--radius)] transform-gpu transition-transform duration-300 ease-in-out active:translate-y-px", className)}
      style={{ "--spread": "90deg", "--shimmer-color": shimmerColor, "--radius": borderRadius, "--speed": shimmerDuration, "--cut": shimmerSize, "--bg": background } as CSSProperties} {...props}>
      <div className={cn("absolute inset-0 overflow-visible [container-type:size]")}>
        <div className="absolute inset-0 h-[100cqh] animate-shimmer-slide [aspect-ratio:1] [border-radius:0] [mask:none]">
          <div className="absolute -inset-full w-auto rotate-0 [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))] [translate:0_0]" />
        </div>
      </div>
      <span className="z-0 whitespace-nowrap text-sm font-medium">{children}</span>
      <div className={cn("absolute inset-[var(--cut)] rounded-[var(--radius)] [background:var(--bg)] group-hover:opacity-90")} />
      <span className="z-10 whitespace-nowrap text-sm font-medium">{children}</span>
    </button>
  )
})

ShimmerButton.displayName = "ShimmerButton"