Text Shimmer

import type { CSSProperties, ElementType, ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface TextShimmerProps {
  children: ReactNode;
  as?: ElementType;
  /** Seconds per sweep. */
  duration?: number;
  className?: string;
}

/**
 * Text effect: a light band sweeps across muted text — for "thinking…",
 * "generating…" or live labels. Pure CSS (keyframes shipped inline).
 */
export function TextShimmer({ children, as: Tag = "span", duration = 2.2, className }: TextShimmerProps) {
  return (
    <>
      <Tag
        className={cn(
          "inline-block bg-clip-text text-transparent [background-size:250%_100%] [background-image:linear-gradient(90deg,var(--da-muted-fg)_35%,var(--da-fg)_50%,var(--da-muted-fg)_65%)] motion-safe:animate-[da-shimmer_var(--shimmer-d)_linear_infinite]",
          className,
        )}
        style={{ "--shimmer-d": `${duration}s` } as CSSProperties}
      >
        {children}
      </Tag>
      <style href="da-shimmer" precedence="default">{`@keyframes da-shimmer { from { background-position: 100% 0 } to { background-position: 0% 0 } }`}</style>
    </>
  );
}

export default TextShimmer;