"use client";

import { motion, useReducedMotion } from "framer-motion";

/**
 * The tick that confirms a message went out. Drawn rather than faded in: a
 * stroke that completes is the one moment on the site worth animating for its
 * own sake, and it gives the success panel something to arrive on.
 */
export function CheckMark({ className = "" }: { className?: string }) {
  const reduced = useReducedMotion();
  const draw = (delay: number) =>
    reduced
      ? {}
      : {
          initial: { pathLength: 0, opacity: 0 },
          animate: { pathLength: 1, opacity: 1 },
          transition: { duration: 0.5, delay, ease: "easeOut" as const },
        };

  return (
    <svg viewBox="0 0 52 52" fill="none" aria-hidden className={className}>
      <motion.circle
        cx="26"
        cy="26"
        r="24"
        stroke="currentColor"
        strokeWidth="1.5"
        className="text-accent/35"
        {...draw(0)}
      />
      <motion.path
        d="M15.5 26.5 L23 34 L36.5 19"
        stroke="currentColor"
        strokeWidth="2.5"
        strokeLinecap="round"
        strokeLinejoin="round"
        className="text-accent"
        {...draw(0.35)}
      />
    </svg>
  );
}