"use client";

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

type HighlightProps = {
  children: ReactNode;
  delay?: number;
  className?: string;
};

/**
 * Signature animation: word enters as accent text on transparent ground,
 * then accent background fills behind it and text flips to ink-900.
 * Trigger once per viewport entry.
 */
export function Highlight({ children, delay = 0, className }: HighlightProps) {
  return (
    <motion.span
      className={cn("hl relative", className)}
      initial={{
        backgroundColor: "rgba(250, 204, 13, 0)",
        color: "var(--accent-500)",
      }}
      whileInView={{
        backgroundColor: "rgba(250, 204, 13, 1)",
        color: "var(--ink-900)",
      }}
      viewport={{ once: true, amount: 0.6 }}
      transition={{
        duration: 0.5,
        ease: [0.22, 1, 0.36, 1],
        delay,
      }}
    >
      {children}
    </motion.span>
  );
}