Drawn Underline

"use client";

import type { ReactNode } from "react";
import { motion, useReducedMotion } from "motion/react";
import { cn } from "@/lib/utils";

export interface DrawnUnderlineProps {
  children: ReactNode;
  /** Stroke color token. */
  tone?: "primary" | "clay";
  delay?: number;
  className?: string;
}

/** Hand-drawn underline that draws itself (SVG pathLength) beneath a word when it scrolls into view — a loose, slightly wavy pen stroke. */
export function DrawnUnderline({ children, tone = "clay", delay = 0.2, className }: DrawnUnderlineProps) {
  const reduce = useReducedMotion();
  return (
    <span className={cn("relative inline-block whitespace-nowrap", className)}>
      {children}
      <svg
        aria-hidden
        viewBox="0 0 200 16"
        preserveAspectRatio="none"
        className={cn("absolute -bottom-2 left-0 h-[0.35em] w-full overflow-visible", tone === "clay" ? "text-da-secondary-fg/70" : "text-da-primary")}
      >
        <motion.path
          d="M3 11C40 5 80 3 120 6s60 4 77 1"
          fill="none"
          stroke="currentColor"
          strokeWidth="4"
          strokeLinecap="round"
          initial={reduce ? false : { pathLength: 0 }}
          whileInView={{ pathLength: 1 }}
          viewport={{ once: true, amount: 0.8 }}
          transition={{ duration: 0.9, delay, ease: [0.45, 0, 0.2, 1] }}
        />
      </svg>
    </span>
  );
}

export default DrawnUnderline;