"use client";
// Adapted from Magic UI (MIT). See THIRD_PARTY_NOTICES.md.
import { type ComponentProps, type CSSProperties } from "react";
export interface TextAnimateProps extends Omit<
  ComponentProps<"span">,
  "children"
> {
  children: string;
  by?: "word" | "character";
}
export function TextAnimate({
  children,
  by = "word",
  className = "",
  ...props
}: TextAnimateProps) {
  const parts =
    by === "character" ? Array.from(children) : children.split(/(\s+)/);
  return (
    <span {...props} className={`ynr-text-animate ${className}`}>
      <span className="ynr-motion-sr">{children}</span>
      <span aria-hidden="true">
        {parts.map((part, index) => (
          <span
            key={`${children}:${index}`}
            className="ynr-text-animate-segment"
            style={{ "--text-animate-index": index } as CSSProperties}
          >
            {part}
          </span>
        ))}
      </span>
    </span>
  );
}