import { cn } from '@/utils/cn';

type ShimmerTextProps = {
  shimmerWidth?: number;
  className?: string;
  children?: React.ReactNode;
};

export default function ShimmerText({
  shimmerWidth = 100,
  className,
  children,
}: ShimmerTextProps) {
  return (
    <p
      style={{ '--shimmer-width': `${shimmerWidth}px` } as React.CSSProperties}
      className={cn(
        'mx-auto max-w-md text-neutral-600/50 dark:text-neutral-400/50',
        // Shimmer effect
        'animate-shimmer background-position-[0_0] bg-size-[var(--shimmer-width)_100%] bg-clip-text bg-no-repeat [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]',
        // Shimmer gradient
        'bg-linear-to-r from-transparent via-black/80 via-50% to-transparent dark:via-white/80',
        className,
      )}
    >
      {children}
    </p>
  );
}