'use client';

import { motion } from 'framer-motion';

interface AnimatedCheckmarkProps {
  size?: number;
  color?: string;
  className?: string;
}

export default function AnimatedCheckmark({
  size = 56,
  color = '#006494',
  className,
}: AnimatedCheckmarkProps) {
  const strokeWidth = size * 0.0625; // scales proportionally with size
  const radius = (size - strokeWidth) / 2;
  const circumference = 2 * Math.PI * radius;
  const center = size / 2;

  // Checkmark path — scaled relative to size
  const checkStartX = size * 0.27;
  const checkStartY = size * 0.5;
  const checkMidX = size * 0.44;
  const checkMidY = size * 0.66;
  const checkEndX = size * 0.73;
  const checkEndY = size * 0.34;

  return (
    <svg
      width={size}
      height={size}
      viewBox={`0 0 ${size} ${size}`}
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      aria-hidden="true"
    >
      {/* Circle */}
      <motion.circle
        cx={center}
        cy={center}
        r={radius}
        stroke={color}
        strokeWidth={strokeWidth}
        strokeLinecap="round"
        fill="none"
        initial={{ strokeDasharray: circumference, strokeDashoffset: circumference }}
        animate={{ strokeDashoffset: 0 }}
        transition={{
          duration: 0.55,
          ease: [0.4, 0, 0.2, 1],
          delay: 0.05,
        }}
      />

      {/* Checkmark */}
      <motion.path
        d={`M ${checkStartX} ${checkStartY} L ${checkMidX} ${checkMidY} L ${checkEndX} ${checkEndY}`}
        stroke={color}
        strokeWidth={strokeWidth}
        strokeLinecap="round"
        strokeLinejoin="round"
        fill="none"
        initial={{ pathLength: 0, opacity: 0 }}
        animate={{ pathLength: 1, opacity: 1 }}
        transition={{
          pathLength: {
            duration: 0.4,
            ease: [0.4, 0, 0.2, 1],
            delay: 0.65,
          },
          opacity: {
            duration: 0.01,
            delay: 0.65,
          },
        }}
      />
    </svg>
  );
}
